cc-frontend-skills
一个用于生成独特、非模板化前端UI设计的Claude Skill。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：cc-frontend-skills。 它的用途是：一个用于生成独特、非模板化前端UI设计的Claude Skill。 完整的 Skill 内容见：https://321skill.com/skills/cc-frontend-skills/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我构建一个航班查询Next.js应用，用户可以输入航班号，应用显示起降时间、时区、地点等信息，先用模拟API返回匹配航班列表，搜索结果展示在表单下方。”，它会自动应用非对称布局、特色字体与颜色，生成一个具有独特视觉风格的前端页面，避免生成通用化的界面。
介绍
这个Skill旨在解决AI生成前端界面时常见的“AI式平庸”审美问题。它通过一套预设的设计原则和主题，帮助开发者快速创建具有视觉特色和设计深度的生产级用户界面。
使用时，你只需在Claude Code中安装此Skill，然后在进行任何前端开发相关的请求时，该Skill会自动介入，将独特的设计系统应用到你的项目中，无需额外指令。
它非常适合希望提升项目视觉设计质量，但又缺乏专业UI设计背景或时间的前端开发者、全栈开发者以及产品原型设计师。
建议在项目初期或进行视觉改版时启用此Skill，它能提供连贯的设计语言。但请注意，其设计风格较为鲜明，若项目已有严格的品牌规范，可能需要手动调整以符合要求。
核心特点
与通用前端代码生成工具不同，它内置了精心调校的、反模板化的设计系统（如非对称布局、特色字体搭配、自定义调色板），专门用于生成具有杂志感、科技感等特定美学风格的UI，而非千篇一律的组件堆砌。
注意事项
不适合需要严格遵守现有、固定品牌设计规范的项目，或追求极度简约、无风格化设计的场景。
常见问题
这个Skill会影响代码功能吗？
不会，它主要影响UI的样式、布局和视觉设计，不改变核心业务逻辑。
可以自定义生成的设计主题吗？
Skill内置了多种主题，但深度自定义需要参考其设计指南文档或修改生成的代码。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/cc-frontend-skills/raw/index.md 读取 cc-frontend-skills 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/cc-frontend-skills/raw/index.md（查看排版版本）