ia-frontend-design
前端界面视觉设计与美学方向
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：ia-frontend-design。 它的用途是：前端界面视觉设计与美学方向 完整的 Skill 内容见：https://321skill.com/skills/ia-frontend-design-x-3/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我正在开发一个 SaaS 数据看板，要求蓝色系、科技感、卡片式布局，请帮我生成一套设计系统，包括颜色、字体、间距和阴影。' 它会输出完整的 CSS 变量和设计令牌，并给出卡片、按钮、表格的样式示例，可直接复制到项目中。
介绍
ia-frontend-design 是一个专注于前端界面视觉设计的美学方向 Skill，帮助你在构建网页、落地页、仪表盘、Next.js 服务端组件等需要视觉品牌感的项目中，快速获得一致、美观的界面指导。它涵盖了色彩系统、排版规范、间距节奏、阴影层级等设计令牌的生成与推荐，让你无需从零摸索设计决策。
使用方式简单直接：在提出需求时，明确描述你的项目类型（如企业官网、数据看板、营销落地页）和目标风格（如极简、科技感、温暖亲和），该 Skill 会输出对应的设计系统建议，包括颜色调色板、字体组合、按钮样式、卡片布局等，甚至可生成 CSS 变量或 Tailwind 配置。你可以直接应用到项目中，或作为设计评审的参考。
适合前端开发、UI 设计师、全栈开发等角色，尤其是那些需要快速搭建视觉原型或统一团队设计语言的人。对于独立开发者，它也能帮你补齐视觉短板，提升产品质感。如果你是 React 模式或测试相关需求，请使用专用的 react-frontend Skill。
使用建议：最好在项目初期就引入该 Skill，以便在设计系统层面做统一规划。不适合需要复杂动画、交互原型或后端逻辑的场景。如有特殊品牌规范，请提前提供具体色值或字体，以便 Skill 更精准地适配。
核心特点
与 react-frontend 等聚焦组件模式与测试的 Skill 不同，ia-frontend-design 专攻前端视觉美学，提供设计令牌、色彩系统、排版规范等，直接输出可落地的 CSS 配置，而非 React 代码逻辑。
注意事项
不适合需要复杂交互逻辑、后端集成或 React 组件测试的场景。
常见问题
这个 Skill 和 react-frontend 有什么区别？
ia-frontend-design 专注于视觉设计、美学方向，如色彩、排版、间距；react-frontend 则关注 React 模式、组件结构和测试。
能用于 Next.js 项目吗？
可以，特别适合 Next.js 服务端组件和页面，该 Skill 输出 CSS 变量或 Tailwind 配置，可直接在 Next.js 中使用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/ia-frontend-design-x-3/raw/index.md 读取 ia-frontend-design 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/ia-frontend-design-x-3/raw/index.md（查看排版版本）