返回目录 / 设计工具
Frontend Design：先用设计 brief 定方向
先提炼设计 token 与布局思路，再按用户场景实现界面。
Skills
先读完整设计 brief，明确产品用途、用户、目标页面及不可改变的约束；对未指定部分留出合理设计空间。先写短计划，包含 4–6 个命名颜色、字体职责、布局方向与设计原则，再检查项目既有组件、样式和 token，避免重复造轮子。实现时把页面层次、留白和交互状态与目标受众匹配，避免 brief 未要求的默认模板式渐变、居中卡片和重复装饰。不要复制具体艺术家作品；完成后在目标 viewport 检查内容密度、对比度和响应式行为。
权限边界
前置条件
- 用户要求创建或修改界面视觉设计；先识别明确设计约束与目标媒介。
- 提出短设计计划，建立颜色、字体、布局与原则的精简 token 系统。
权限边界
- 可根据用户 brief 创建或修改本地前端文件；优先复用项目组件和设计 token。
- 不得复制指定艺术家的作品；用户 brief 明确要求时遵从其要求，避免自行套用审美限制。
限制
该技能规定先做短构思再实现，并反对未被 brief 允许时的常见默认视觉套路；输出必须对应产品与受众。
固定上游来源
- 仓库
- anthropics/skills
- 文件路径
- skills/frontend-design/SKILL.md
- 固定提交
dbd4588f9e1033efb41dad4bef2f7947c8993d44- 来源检查
- 2026-10-14 · 已按固定上游来源核对
仓库指标
以下数字属于上游仓库整体，不代表单个 Skill 或指南的点赞/热度。
- Stars
- 未取得
- Forks
- 未取得
- 观测时间
- 未取得
尚未取得指标快照。
许可证: Apache-2.0
适用工具
Design brief · Project components and style tokens · Browser preview