用途:该技能在构建、编辑或审查面向用户的软件(网页应用、仪表盘、营销站点、组件库等代码)时使用,目标是以 v0 打造专业级、视觉出色的界面与体验。
主要内容模块:设计哲学(克制优于堆砌、清晰优于炫技、一致优于新奇、目的优于装饰);色彩系统(3-5 色规则、主色/中性色/点缀色结构、色彩温度与渐变规则、语义化 design token,规定不得直接使用 text-white、bg-black 等颜色类);排版(最多 2 种字体、字体搭配、Tailwind 字号层级、行高与文本换行);布局与间距(移动优先、Flexbox 优先于 Grid 优先于绝对定位、间距刻度与容器模式、响应式断点);组件架构(文件结构、单一职责、组合优于配置、组件模板与页面拆分);Tailwind CSS 类组织与常用工具类、响应式与动画模式;无障碍(语义化 HTML、焦点管理、屏幕阅读器支持、图片替代文本、色彩对比度、键盘导航);性能(Next.js Image、代码分割、加载状态、数据获取);代码组织(项目结构、命名规范、导入顺序)。
使用方式:资料未提供安装命令或具体调用步骤。文档以规范条文与代码示例形式给出,示例涉及 Tailwind CSS、Next.js、shadcn 组件、cn 工具函数、next/font 字体配置及 CSS 变量 design token。
适用场景:使用 v0 生成或迭代前端界面、审查界面质量、建立组件库设计规范等。
限制:资料为设计开发指南文本,未说明平台支持范围、收费方式、输出产物形式与效果承诺,这些信息暂未提供;其中的规则为指南性约束,非强制校验。