Design Distinctive Frontend Interfaces — 差异化前端界面设计技能

技能简介

1bertogit/frontend-design 是为 Claude、Codex、Claude Code 等 AI 编程代理设计的前端视觉设计技能，专门解决"AI 生成界面千篇一律"的痛点。它引导 AI 助手在动手编码前先确定明确的视觉方向（typography、color、motion、composition），避免落入通用 modern 模板的窠臼。无论是 SaaS 控制台、营销落地页还是应用原型，该技能都能帮助产出有辨识度、有产品调性、视觉细节到位的成品界面。

核心能力

• 引导 AI 助手在编码前先选择清晰的视觉方向（visual direction）。
• 鼓励产出生产级 HTML、CSS、JavaScript、React 或 Vue 代码，避免示例级粗糙实现。
• 系统提升排版（typography）、配色（color）、动效（motion）、构图（composition）与视觉细节。
• 推动"上下文感知"的页面、组件、应用、面板布局，强调信息层级与功能契合度。
• 明确反对常见的 AI 设计套路、通用字体、可预测的视觉主题。
• 支持多屏原型设计，帮助建立连贯的视觉系统与交互状态。

安装配置

1. 通过 npx 命令一键安装：npx skillstore add 1bertogit/frontend-design。
2. 启用后，AI 助手在前端 UI 类任务中即可调用该技能。
3. 项目需具备现代前端栈（HTML/CSS/JavaScript 或 React/Vue），并准备好设计目标用户画像。
4. 可选：准备色板、字体、可访问性需求等约束条件，进一步提升输出质量。

使用步骤

1. 明确产品语境：告知 AI 助手产品类型、目标用户、希望传达的调性（专业 / 活泼 / 极简 / 复古等）。
2. 选择视觉方向：在 typography、color、motion、composition 四维度明确选择，并解释选择理由。
3. 设计组件 / 页面：依据方向绘制线框或草图，定义信息层级与状态（hover / active / empty / error）。
4. 实现代码：使用生产级 CSS（CSS 变量、Grid / Flex、容器查询等现代特性）落地。
5. 多屏延展：保持视觉系统在多页面、多组件之间的一致性，避免每个页面各做一套。
6. 可访问性与性能：补齐对比度、键盘导航、响应式断点与首屏加载表现。

适用场景

• 为 SaaS 产品打造具有品牌辨识度的 Dashboard 与控制台。
• 将平淡的营销页升级为更有记忆点的体验，提升转化率。
• 快速生成可交互的应用原型，用于用户访谈或投资人演示。
• 为开发者工具的设置面板、信息密度高的界面提升视觉细节。
• 推动团队在多个项目间复用成熟的视觉系统与组件。

适用人群

• 负责产品视觉与品牌一致性的产品设计师与 Design Lead。
• 需要为客户快速产出差异化 Demo 的自由职业前端工程师。
• 正在打磨 SaaS 产品 UI 的全栈创始人 / 独立开发者。
• 关注可访问性与视觉细节的资深前端工程师。
• 学习"如何用 AI 做出非通用界面"的设计 / 工程双背景同学。

工作原理

该技能内置一套视觉决策框架，覆盖排版、配色、动效、构图四大维度以及典型反模式清单。AI 助手在生成界面时会先要求产品语境、目标用户、调性诉求，再依据决策树产出方案，避免落入"渐变紫 + 大圆角 + emoji 图标"等通用 AI 套路。技能不直接修改文件，所有改动由用户在确认后写入项目；技能同时强调"少即是多"——在视觉细节与信息密度之间寻找平衡，避免过度装饰。

官方链接

• Skillstore 主页：https://skillstore.io/skills/1bertogit-frontend-design
• 仓库地址：https://github.com/1bertogit/modern-face-definitive/tree/main/.claude/skills/frontend-design
• Manifest 接口：https://skillstore.io/api/skills/1bertogit-frontend-design/manifest