SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场setup

setup

设计与创作

查看项目

更新于 10-15 12:26

技能介绍

用途

setup 用于在 better-web-ui 的后续工作开始前，收集并持久化项目的设计上下文，包括受众、品牌人格、用户体验目标与实现默认值。它的目标是让后续会话无需反复重新讨论同一批设计决策，而是复用已经确认并写入文件的上下文。

主要能力

  • 在提问之前先系统性探索代码库，包括：README 与文档（项目目的、目标受众、既定目标）；package.json 与配置文件（技术栈、依赖、现有设计库）；shadcn 项目配置（components.json、shadcn schema 使用、CLI 生成的配置、预设线索、Radix 与 Base UI 的选择）；样式系统（Tailwind、CSS modules、CSS-in-JS、原生 CSS、工具类系统、tokens）；组件库（shadcn/ui、Nuxt UI、Angular Material、自定义 UI 包、内部系统）；表单架构（TanStack Form、React Hook Form、Formik、vee-validate、Angular forms、自定义校验/状态接线）；表格/数据网格架构（TanStack Table、AG Grid、框架原生表格、自定义表格状态）；长列表/虚拟化架构（TanStack Virtual、react-window、react-virtualized、框架原生虚拟化、自定义窗口化逻辑）；现有组件、品牌资产、设计 tokens/CSS 变量、样式指南或品牌文档。
  • 记录已了解的内容与仍不明确的内容，然后只就代码库无法推断的部分，直接向用户提出以用户体验为核心的问题。
  • 将结论综合为 Design Context 段落，并写入项目根目录的 .better-web-ui.md。
  • 处理旧文件迁移：.better-ui.md 与 .impeccable.md 仅作为迁移输入，新工作统一以 .better-web-ui.md 为准。
  • 可按用户意愿将 Design Context 追加到 AGENTS.md。

使用方式

流程分三步：

  1. 探索代码库。在提问前尽可能扫描项目，弄清用途、受众、技术栈、依赖、设计库、样式系统、组件库、表单/表格/虚拟化架构、现有组件、品牌资产、设计 tokens 与样式文档，并列出已知与未知。
  2. 提出以用户体验为核心的问题。仅针对无法从代码库推断的内容提问，涵盖：用户与用途（谁使用、使用场景、目标年龄段或群体、是否需要满足次要受众如家长、教师、管理员或照护者、要完成什么任务、界面应唤起什么情绪）；品牌与人格（用三个词描述品牌人格、参考站点或应用及具体原因、明确不希望像什么、界面应更严肃/俏皮/优雅/实用/编辑风还是其他、语言应正式/中性/口语化）；美学偏好（视觉方向偏好、浅色/深色/两者、必须使用或避免的颜色、圆角应偏方正/适度圆润/柔和俏皮、色板偏暖/冷/中性）；可访问性与包容性（具体无障碍要求、WCAG 等级、已知用户需求、减少动效、色盲及其他适配）；实现默认值（默认假定什么框架/运行时、新项目是否有指定样式系统或组件库/区块系统、项目是否已使用应保留的表单库或校验栈、表格或数据网格库、长列表虚拟化库、若使用 shadcn/ui 是直接用上游原语还是本地封装/组合、是否使用 shadcn/ui Blocks 或 re-ui、偏 Radix 还是 Base UI 生态、是否已有 components.json 或 shadcn create / shadcn apply 定制作为当前基线）。
  3. 写入设计上下文。把发现与用户回答综合为 ## Design Context 段落，包含 Users、Brand Personality、Aesthetic Direction、Implementation Defaults、Design Principles 几个部分，并写入项目根目录的 .better-web-ui.md。若该文件已存在，则原地更新 Design Context 段落；若存在旧文件，则把 Design Context 迁移或镜像进 .better-web-ui.md，使 better-web-ui 从此拥有单一权威的项目上下文文件。

实现默认值的优先级需在持久化上下文中清晰体现：

  1. 检测到的现有项目技术栈
  2. 新项目中用户的明确偏好
  3. 基于框架的兜底默认值

当项目已有样式系统、组件库、表单栈或表格/网格栈时，除非用户明确要求更改，否则以现有方案为默认。若项目是全新的且用户未指定实现偏好，则采用框架默认矩阵并记录结果；对于仍开放表单架构的新 React、Vue、Angular、Solid 或 Svelte 项目，默认使用 TanStack Form 并记录；表格或数据网格架构同样默认 TanStack Table；长列表或虚拟化架构同样默认 TanStack Virtual。当区分对面向 React 的组件生态有意义时，还需记录项目实际是偏 Radix、偏 Base UI 还是混合，避免后续设计工作靠猜测。若存在 shadcn 专属项目配置，应作为基线记录，而不是让后续会话假定通用兜底默认值。

设计原则应从具体杠杆推导，而非空泛愿望，例如“先用间距与字重建立层级，再引入颜色”“使用暖中性色与克制的强调色”“偏好编辑式排版与大部分方正的圆角”“每个屏幕只保留一个明显的主操作”。最强的原则同时说明该做什么与该避免什么，应作为带判断的默认决策，而非装饰性口号。

适用场景

  • 新会话或新协作者接手项目，需要统一的设计上下文基线。
  • 项目存在多份旧设计上下文文件，需要迁移到单一权威文件。
  • 团队希望避免反复重新讨论同一批设计取舍。

限制

  • 关于具体收费、价格、支持的平台与可量化效果，现有资料暂未提供。
  • 资料未提供安装命令或代码示例。
  • 写文件位置为项目根目录的 .better-web-ui.md，AGENTS.md 追加需用户确认。