企业官网建设流程全解析

Feature: [Feature Name]

【免费下载链接】claude-skills67 Specialized Skills for Full-Stack Developers. Transform Claude Code into your expert pair programmer.项目地址: https://gitcode.com/GitHub_Trending/claud/claude-skills

[Frontend]

• UI components needed
• Client-side validation
• Loading/error states
• Optimistic UI updates
• Accessibility considerations

[Backend]

• API endpoints (method, path)
• Request/response schemas
• Database operations
• Business logic
• External service calls

[Security]

• Authentication requirements
• Authorization rules
• Input sanitization
• Rate limiting
• Audit logging

逐层拆解每个检查点： **Frontend 层**要求从"交互完整性"出发设计： - **UI components needed（所需 UI 组件）**：明确组件边界，为后续编码提供清单； - **Client-side validation（客户端校验）**：提供即时反馈，但它只是第一道防线——SKILL.md 明确写着 "Validate input on both client and server"，客户端校验永远不能替代服务端校验； - **Loading/error states（加载与错误状态）**：配合 [error-handling.md](https://link.gitcode.com/i/a3fc69584ad5328cb79e306ae256cf93) 中的统一 `useApi` Hook 或 `handleSubmit` 模式，为异步操作设计 loading 与 error 的双态展示； - **Optimistic UI updates（乐观更新）**：先更新界面再请求服务器，配合 [common-patterns.md](https://link.gitcode.com/i/83c93e320836f04b531501d27b8b4d82) 中 React Query `onMutate` / `onError` 回滚模式，实现即时反馈与失败回滚； - **Accessibility considerations（可访问性）**：对应 [frontend-patterns.md](https://link.gitcode.com/i/87345ba1a085af6f8a35b57fb67aca78) 中的可访问模态框（`role="dialog"` + `aria-modal`）、键盘导航与焦点陷阱（focus trap）等模式。 **Backend 层**要求以"契约与数据"为核心设计： - **API endpoints (method, path)**：遵循 [api-design-standards.md](https://link.gitcode.com/i/4e2a787d262596282b6e2c4991fe442e) 中的 RESTful 约定——复数名词 URL（`/api/users` 而非 `/api/user`）、语义化 HTTP 方法（GET 读、POST 建、PUT/PATCH 改、DELETE 删）； - **Request/response schemas**：用 Pydantic（Python）或 Zod（TypeScript）声明请求与响应结构，保证类型安全与字段边界； - **Database operations**：明确所需的数据操作，并在实现阶段一律使用参数化查询（parameterized queries）而非字符串拼接，从源头阻断 SQL 注入； - **Business logic**：将校验、状态流转等业务规则与服务层解耦； - **External service calls**：列出对第三方服务的调用，设计时即考虑 [backend-patterns.md](https://link.gitcode.com/i/52546aa88d43010c34afef73f462cdff) 中的熔断器（Circuit Breaker）、幂等处理与超时策略。 **Security 层**要求"防线前置"： - **Authentication requirements**：明确接口是否需要认证，参考 [security-checklist.md](https://link.gitcode.com/i/5e01b87c261680e22a816160d2393aae) 中的认证模式（NestJS `JwtAuthGuard`、FastAPI `Depends` 依赖注入）； - **Authorization rules**：所有权校验与基于角色的访问控制（RBAC）； - **Input sanitization**：输入净化，抵御 XSS； - **Rate limiting**：限流策略（如登录接口 5 次/15 分钟，普通接口 100 次/15 分钟）； - **Audit logging**：记录登录失败、资料变更等安全事件。 ## 三、完整示例：User Profile Update `design-template.md` 提供了一个完整的参考示例——用户资料更新功能，展示了三个视角如何被同时设计： ```markdown ## Feature: User Profile Update ### [Frontend] - Form with name, email, bio, avatar fields - Client-side validation with real-time feedback - Loading states during submission - Error/success message display - Optimistic UI updates ### [Backend] - PUT /api/users/:id endpoint - Pydantic/Zod schema validation - Database transaction with rollback on error - Audit logging for profile changes - Email verification if email changes ### [Security] - Authorization: users can only update own profile - Input sanitization against XSS - Rate limiting (10 req/min per user) - File upload validation for avatar (type, size) - CSRF protection on form submission

这个示例中值得注意的细节：

1. Backend 层点名了事务回滚（"Database transaction with rollback on error"），这是资料更新这类多步骤写操作的关键可靠性保障，也与 deliverables-checklist.md 中"数据库迁移支持回滚"的交付要求一脉相承；
2. 邮件变更触发二次验证（"Email verification if email changes"），这是业务规则的典型示例——设计阶段就把状态流转写入方案；
3. Security 层的"仅能更新自己的资料"（"users can only update own profile"）正是防 IDOR（越权访问）的标准写法，对应 security-checklist.md 快速参考表中的 "IDOR → Authorization checks"；
4. 头像上传校验（"File upload validation for avatar (type, size)"）意味着服务端必须校验文件类型与大小白名单，而不是信任Content-Type头；
5. 限流细化到单用户 10 req/min，比全局限流更精细，体现"每端点按需配置"的 api-design-standards.md 原则。

四、Technical Design Document：用 EARS 格式把设计落成文档

三视角模板回答的是"这个功能要做什么、涉及哪些层面"，而Technical Design Document（技术设计文档）回答的是"这份设计如何沉淀为可评审、可追踪、可交接的文档资产"。

design-template.md规定：为每个功能在仓库specs/目录下创建specs/{feature_name}_design.md，其标准骨架如下：

# Feature: {Name} ## Requirements (EARS Format) While <precondition>, when <trigger>, the system shall <response>. Example: While a user is logged in, when they click Save, the system shall persist the form data and display a success message. ## Architecture - Frontend: [Components, state management] - Backend: [Endpoints, data models] - Security: [Auth, validation, protection] ## Implementation Plan - [ ] Step 1: Create Pydantic/Zod schemas - [ ] Step 2: Implement API endpoint - [ ] Step 3: Build UI component - [ ] Step 4: Add error handling - [ ] Step 5: Write tests

这里引入的EARS 格式（EARS，即 "While… When… The system shall…" 的易读需求语法）值得单独拆解：

• While <precondition>：前置条件，描述系统状态（如 "a user is logged in"）；
• when <trigger>：触发事件，描述用户或系统的动作（如 "when they click Save"）；
• the system shall <response>：期望行为，描述系统响应（如 "persist the form data and display a success message"）。

这种格式把"模糊的产品想法"转译成"可测试的系统行为"，每个需求都能直接映射到一条测试用例。仓库中另一技能 spec-miner 同样使用该语法体系，说明 EARS 是 claude-skills 全库共享的需求表述标准。

Implementation Plan 以任务清单（checklist）形式呈现，Step 1 建 schema、Step 2 实现接口、Step 3 构建 UI、Step 4 加错误处理、Step 5 写测试——这个顺序本身就是 fullstack-guardian "写代码前先写实现计划" 约束的载体。

在 SKILL.md 的 Output Templates 输出模板 中，实现功能时要求交付：技术设计文档（功能非平凡时）、后端代码（模型/schema/端点）、前端代码（组件/Hook/API 调用）、简要安全说明。这与 design-template.md 的产物要求一一对应。

五、三视角设计在 fullstack-guardian 工作流中的位置

三视角设计不是孤立的文档模板，它是 SKILL.md 核心工作流 的关键环节。完整工作流如下：

1. Gather requirements—— 理解功能范围与验收标准；
2. Design solution—— 从 Frontend / Backend / Security 三个视角设计方案（即本文所讲的设计模板）；
3. Write technical design—— 将方案写入specs/{feature}_design.md；
4. Security checkpoint—— 在写任何代码前，对照 security-checklist.md 逐项确认 auth、authz、validation、output encoding 已就位；
5. Implement—— 增量构建，边做边测；
6. Hand off—— 交接给 Test Master 做 QA、DevOps 做部署。

可以看到，设计模板产出的三个层面清单，正是第 4 步安全关卡和第 5 步增量实现的工作底稿。

六、从设计到代码：三视角的源码级落地示例

为说明三视角设计如何落到真实代码，SKILL.md 的三视角示例 给出了一个最小认证端点，恰好覆盖设计模板的三大层面。

Backend 层——认证路由 + 参数化查询 + 收窄的响应 schema：

@router.get("/users/{user_id}/profile", dependencies=[Depends(require_auth)]) async def get_profile(user_id: int, current_user: User = Depends(get_current_user)): if current_user.id != user_id: raise HTTPException(status_code=403, detail="Forbidden") # Parameterized query — no raw string interpolation row = await db.fetchone("SELECT id, name, email FROM users WHERE id = ?", (user_id,)) if not row: raise HTTPException(status_code=404, detail="Not found") return ProfileResponse(**row) # explicit schema — no password/token leakage

对应设计模板的检查点：认证（Depends(require_auth)）、授权（current_user.id != user_id返回 403）、参数化查询（?占位符）、响应 schema 显式排除敏感字段。

Frontend 层——组件调用端点并优雅处理错误：

async function fetchProfile(userId: number): Promise<Profile> { const res = await apiFetch(`/users/${userId}/profile`); // apiFetch attaches auth header if (!res.ok) throw new Error(await res.text()); return res.json(); } // Client-side input guard (never the only guard) if (!Number.isInteger(userId) || userId <= 0) throw new Error("Invalid user ID");

【免费下载链接】claude-skills67 Specialized Skills for Full-Stack Developers. Transform Claude Code into your expert pair programmer.项目地址: https://gitcode.com/GitHub_Trending/claud/claude-skills