用途:这是 Daily Writing Friends 项目的设计系统指南,要求在该项目中进行任何 UI 相关工作时必须遵循,覆盖组件、页面、按钮、表单、样式、Tailwind CSS 与深色模式。
主要能力:提供设计文档索引,包括 tokens.md(颜色、排版、间距)、buttons.md(按钮层级与用法)、components.md(卡片、输入、交互)、theme.md(深色模式、无障碍、移动端)。颜色系统以 CSS 变量定义,明暗模式各有背景、前景与强调色。按钮层级从高到低为 cta(关键转化,如注册、加入、主 FAB)、default(主要交互,如登录、保存、提交)、outline(辅助操作,如草稿、取消)、ghost(细微操作,如编辑、导航、登出)、destructive(危险操作,红色 ghost 风格删除)。
使用方式:组件使用如 <Button variant="cta">회원가입</Button>、<Button variant="default">글 저장</Button> 等;ghost 按钮需要统一样式时可用 className 覆盖 text-foreground 与 hover 状态。深色模式采用 Tailwind darkMode: 'class',通过 @/shared/hooks/useTheme 的 useTheme() 切换,主题持久化在 localStorage 并回退到系统偏好。间距上主要区块用 my-6 / py-6,次要区块用 my-3 / py-3,默认 space-y-4、p-4,移动端 px-3 md:px-4。
适用场景与限制:适用于该项目所有 UI 调整与新增。规范要求避免使用 transition-all,触控目标至少 36px(密集 UI)或默认 44px,动态数字使用 tabular-nums,用户上传图片加黑色/白色描边,嵌套圆角保持同心,主要表面用阴影而非硬边框,按钮保留按压缩放反馈。无障碍要求文字对比度 4.5:1、大文字 3:1,焦点使用 reading-focus,隐藏文字用 sr-only。资料未提供收费、价格、平台或效果等其它信息。