ia-frontend-design
前端界面视觉设计与美学指导
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ia-frontend-design。 它的用途是：前端界面视觉设计与美学指导 完整的 Skill 内容见：https://321skill.com/skills/ia-frontend-design/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'帮我设计一个现代极简风格的SaaS仪表盘首页，使用蓝色主色调，包含数据概览卡片、折线图区域和用户列表，支持深色模式。' 它会生成完整的HTML/CSS代码，包含布局网格、色彩系统、字体规范以及响应式设计，并附带设计说明。
介绍
【解决什么问题】在构建网页、着陆页、仪表盘、Next.js服务端组件或任何需要视觉身份的应用程序时，开发者常常面临界面美学不统一、配色混乱、布局缺乏层次感等问题。本Skill提供系统的视觉设计指导和美学方向，帮助非设计背景的工程师快速产出专业水准的前端界面。
【怎么用】直接向AI描述你的设计需求，例如目标风格、品牌色、页面类型（如SaaS仪表盘、营销着陆页），AI会输出完整的HTML/CSS代码、设计建议（包括色彩系统、排版规范、间距节奏）以及可复用的设计令牌。支持响应式布局和深色模式适配。
【适合谁】前端开发人员、UI设计师、全栈工程师、产品经理，以及任何需要快速搭建美观前端界面的团队成员。尤其适合那些没有专职设计师或希望提升界面视觉质量的团队。
【使用建议】建议在使用前明确品牌色和风格偏好，以便AI生成更精准的设计。对于复杂的React组件逻辑或交互测试，请使用配套的react-frontend Skill。注意本Skill不提供JavaScript交互逻辑，仅关注视觉层。
核心特点
与同类前端技能不同，本Skill专注于视觉美学和设计方向，而非React模式、组件逻辑或测试。它强调色彩、排版、布局和视觉层次，适合需要快速提升界面视觉品质的场景。
注意事项
不适合需要React组件模式、交互逻辑或单元测试的场景，也不适合后端API或数据处理任务。
常见问题
这个Skill能生成React组件吗？
不能，它专注于视觉设计（HTML/CSS），如需React组件请使用react-frontend Skill。
支持响应式设计吗？
支持，AI会生成适配移动端、平板和桌面的响应式布局代码。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ia-frontend-design/raw/index.md 读取 ia-frontend-design 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ia-frontend-design/raw/index.md（查看排版版本）