AI Skills
frontend-design

frontend-design

热门

设计并构建具有独特视觉风格、精细排版、考究布局及可直接运行的 HTML/CSS/JS 或框架代码的生产级前端界面。适用于网站、落地页、仪表盘、React 组件、应用界面及 UI 美化优化等场景。

8.3万Star
9652Fork
更新于 2026/8/3
获取 Skill源代码

相关 Skills

ui-to-vue24万pymoo4.2万algorithmic-art15万
SKILL.md
只读
名称
frontend-design
描述

设计并构建具有独特视觉风格、精细排版、考究布局及可直接运行的 HTML/CSS/JS 或框架代码的生产级前端界面。适用于网站、落地页、仪表盘、React 组件、应用界面及 UI 美化优化等场景。

frontend-design

改编自 Anthropic 官方针对 Open Design 的 frontend-design Skill。

当用户需要构建或改善前端界面时使用此 Skill：例如网站、落地页（Landing Page）、仪表盘（Dashboard）、应用界面、HTML/CSS 产物、React/Vue/Svelte 组件，或对现有 UI 进行视觉重构。

其目标绝不仅仅是“让页面好看一点”，而是交付具备清晰设计主张、扎实工艺细节且符合实际产品上下文的高质量可运行前端代码。

工作流

  1. 确定风格前先吃透需求

    • 明确目标受众、核心功能、业务领域及情感基调。
    • 理清技术约束：使用的框架、现有样式规范、无障碍要求（Accessibility）、性能、导出目标或响应式适配需求。
    • 如果项目仓库中已包含设计 Token、组件库、截图或 DESIGN.md，请以其作为唯一事实来源（Source of Truth）。

  2. 明确并贯彻具体的视觉风格方向

    • 挑选切合产品的设计路线：极致极简（Brutally Minimal）、编辑出版风（Editorial）、轻奢质感（Luxury）、活泼趣味（Playful）、硬核工业风（Industrial）、复古未来感（Retro-futuristic）、高密度业务操作界面（Dense Operational）、沉稳企业风（Calm Enterprise）、艺术感消费级（Artful Consumer）或其他精准风格。
    • 通过字体排版、间距、配色、视觉层级、动效和组件形状将风格具体落地。
    • 杜绝同质化的 AI 默认风格：如滥用紫蓝渐变、毫无必要的毛玻璃卡片、千篇一律的 SaaS 布局、圆角过大的卡片、毫无实意的图标排布，以及对界面毫无助益的装饰性色彩斑块。

  3. 设计真实可用的产品界面，而非仅仅制作一张占位海报

    • 完整提供实际用户所需的控制组件、空状态/加载中/错误状态、数据表格、筛选器、导航及响应式布局行为。
    • 使用真实自然的内容。若具体数据未知，明确标注为示例数据、待补充或不可用，切勿虚构夸大宣传文案。
    • 为目标用户保持高效的操作流程。仪表盘和工具类界面应具备高可读性与足够的信息密度以满足高频使用；营销落地页则可更具视觉表现力。

  4. 编写生产级前端代码

    • 优先采用项目仓库现有的框架、组件约定、图标库、Token 和样式方案。
    • 对于独立构件（Standalone Artifacts），除非用户明确要求使用框架，否则优先使用纯粹且自包含的 HTML/CSS/JS。
    • 使用语义化 Markup、支持键盘无障碍操作的控件、清晰可见的聚焦状态（Focus States）、合理的对比度以及响应式布局约束。
    • 对重复使用的颜色、间距、阴影和字号阶梯使用 CSS 变量管理。

  5. 精细打磨视觉工艺

    • 字体排版：挑选富有表现力且易读的字体组合。除非风格明确走向实用主义，否则避免直接把系统默认字体族作为核心视觉主张。
    • 色彩搭配：构建角色分明、平衡协调的调色板。点缀色（Accent Color）的使用要克制且精准。
    • 布局构图：有意图地运用对齐、节奏、密度和留白。切勿让卡片、面板或标签随性漂移。
    • 动效微交互：为状态切换、元素显隐和操作反馈添加有目的的过渡动效。出于性能考虑，优先使用 transform 和 opacity。
    • 细节考究：仅在切合设计概念时才使用材质纹理、边框、阴影、分割线、媒体素材与图标体系。

  6. 交付前严格自检

    • 界面在移动端和桌面端宽度下均能正常显示与响应。
    • 文本适配容器，不会溢出或与相邻 UI 重叠。
    • 交互元素具备完整的 Hover / Focus / Active / Disabled 状态。
    • 设计规避了明显的 AI 生成视觉套路（AI Slop）。
    • 最终呈现具备一个令人印象深刻的特质，使用户关闭页面后仍能准确描述。

Open Design 整合

当 Open Design 提供了生效中的设计系统时，应将其视为产品的品牌契约。优先使用注入的色彩、字体、布局和组件规范；设计系统未作规定的部分，再应用本 Skill 的前端工艺规则。

当 Open Design 注入了如 typography、color 和 anti-ai-slop 等工艺参考规范时，请在完成交付前逐一核查。若用户的品牌规范与通用工艺规则冲突，以用户的品牌规范为准。

来源

许可证

本 Skill 改编自 Anthropic 官方 Skills 仓库。详见本文件夹下的 LICENSE.txt 以了解上游 Apache-2.0 许可证条款。