frontend-design
生成或重写具有赛博朋克美学的前端界面代码
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：frontend-design。 它的用途是：生成或重写具有赛博朋克美学的前端界面代码 完整的 Skill 内容见：https://321skill.com/skills/frontend-design/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要一个具有赛博朋克风格的数据仪表盘界面，主色调是深黑和霓虹蓝，要有科技感和紧迫感。” 它会基于此概念，提供包括使用高对比度色彩、科技感字体（如JetBrains Mono）、带有发光效果的交互组件以及密集信息网格布局的具体代码实现和设计建议。
介绍
这个技能旨在解决开发者或设计师在创建具有独特视觉风格和概念驱动的前端界面时遇到的困难。它并非提供通用模板，而是帮助用户为特定产品概念（如赛博朋克、现代产品、文艺编辑等）生成或重写具有“作者感”、富有表现力且高度可用的UI代码。
使用时，你可以向AI描述你的产品概念、目标氛围或现有界面，该技能会基于其核心设计哲学，在排版、色彩、交互和布局上提供具体建议和代码实现，确保界面具有强烈的视觉辨识度和统一的叙事感。
它非常适合追求产品界面具有独特美学和叙事深度的前端开发者、UI/UX设计师、产品经理以及独立开发者，尤其适用于那些希望界面超越“通用好看”，能与产品核心概念深度融合的项目。
与同类前端代码生成工具相比，它的核心区别在于强调“概念先行”而非“风格套用”。它不提供一套固定的视觉系统，而是根据每个项目的独特叙事（如“文艺温暖”、“赛博朋克”、“现代乐观”）来定制设计决策，追求界面在视觉、交互和情感上与产品世界观的高度统一。
核心特点
核心区别在于“概念驱动设计”：它不为所有项目套用同一套视觉规范，而是根据每个产品的独特叙事（如编辑感、科技感、赛博朋克感）来定制从排版、色彩到交互的完整设计体系，确保界面美学服务于产品世界观。
注意事项
不适合追求快速生成通用、无风格倾向或完全遵循现有成熟设计系统（如Ant Design、Material Design）组件代码的场景。
常见问题
能生成Vue或React组件代码吗？
可以，它提供的是设计哲学和具体实现建议，你可以要求其生成对应框架的组件代码。
能帮我优化现有页面的样式吗？
可以，提供你的代码或描述，它能基于其美学原则（如赛博朋克、现代产品等）进行重写和风格重塑。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/frontend-design/raw/index.md 读取 frontend-design 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/frontend-design/raw/index.md（查看排版版本）