构建与 Timeplus Console 一致的用户界面外观与交互体验。当为 Timeplus 产品或与 Console 对齐的应用生成、样式化或评审 UI（包括按钮、输入框、开关、表格、卡片、布局等）时，请使用本技能；尤其适用于需要精确复现 Timeplus 色彩体系、Inter 字体排版比例、4px 圆角的扁平化表面形状、间距标尺以及组件状态（如 hover、focus、disabled 等）的场景。本技能提供一份 `DESIGN.md`（遵循 google-labs-code/design.md t
Timplus Design System.
功能概述
Timplus Design System.是一项面向实际任务的技能，主要用于Generate UI,外观类似Timplus Console:干净,专业,和.fald,以中性灰色尺度建造,单粉色口音(#D53F8C),用于:1.primic acties。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
核心要点
- 使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。
- 从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
- 实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；
使用与执行
若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；
结果检查与注意事项
涉及批量任务时，还应保存进度，避免中断后重复操作。该技能适合用于一次性任务，也可以接入自动化工作流，与其他技能或上层代理配合完成更完整的业务链路；在组合使用时，应明确每一步的输入输出关系，并避免不同步骤之间出现参数冲突。
Timeplus 设计系统
生成外观与 Timeplus 控制台 一致的 UI：简洁、专业、扁平化，基于中性灰阶配色，主操作使用单一粉红色强调色（#D53F8C），字体采用 Inter，所有圆角统一为 4px。
权威规范来源是 DESIGN.md —— 一个来自 google-labs-code/design.md 的 token 文件。其 YAML 前置元数据（front matter）明确定义了精确的颜色、排版、间距、圆角半径及组件 token；正文部分则说明了如何应用这些规范。请严格按原值使用 token。
快速参考
| 需求 | 查阅文档 |
|---|---|
| 设计 token 及设计依据（颜色、字体、布局、形状、组件、最佳实践/禁忌） | DESIGN.md |
| 可直接复制粘贴的 CSS、Tailwind 配置及 React 组件 | references/components.md |
何时查阅参考文档
DESIGN.md—— 所有 Timeplus UI 工作开始前必读。提供完整的调色板（gray-100…gray-900、pink-400/500、red-400/500）、Inter 字体比例体系、4px 圆角规则、无阴影的扁平化层级模型、基于 4px 的间距标尺、各组件的 token 定义与状态规范，以及设计原则（最佳实践与禁忌）。references/components.md—— 实现阶段查阅。包含完整 CSS 样式、tailwind.config.js中的颜色与字体扩展配置、CSS 自定义属性（CSS custom properties）、以及按钮（primary/secondary/destructive）、文本输入框、开关控件（toggle switches）、卡片（cards）、表格（tables）、链接（links）、分隔线（dividers）和图标（icons）等 React 组件；同时涵盖无障碍支持（满足 WCAG AA 对比度要求、焦点状态、触控目标尺寸）及资源使用指南。
核心规则（概览）
- 字体：仅使用 Inter 字体 —— 正文内容使用 Regular（字重 400），标题与控件使用 Semi-Bold（字重 600）；字号不得小于 12px。
- 颜色：UI 主体由中性灰色构成；pink-500 专用于唯一主操作；red-500 仅用于破坏性操作或错误状态。
- 表面（Surfaces）：页面背景为暖调米白
#F7F6F6；内容区域置于白色卡片上，卡片边框为 1px 宽的#DAD9DB。 - 形状：全局统一 4px 圆角（仅切换开关 toggle 使用 pill 形状）；禁用阴影 —— 通过边框实现视觉分隔。
- 间距：采用基于 4px 的间距标尺；容器内边距为 24px，表单字段之间间距为 16px。
- 按钮：高度为 32px；输入框：高度为 40px；所有可聚焦元素必须提供可见的 2px 粉红色焦点环（focus ring）。
变更验证
编辑 DESIGN.md 后，可选地根据格式规范对其进行 lint 检查：
npx @google/design.md lint DESIGN.md
也可将 token 导出为 Tailwind 或 W3C DTCG 格式：
npx @google/design.md export --format css-tailwind DESIGN.md > theme.css
热门AI工具
相关专题
DBeaver数据导入专题，整理Excel、CSV、SQL、TXT等常见文件的数据导入方法，涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作，帮助用户将本地文件中的数据写入数据库，并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。
0
2026.11.05
DBeaver安全防护专题，围绕数据库连接安全、账号密码保护和访问权限管理展开，整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法，同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项，帮助用户提高数据库日常管理的安全性。
0
2026.11.05
本专题聚焦DBeaver数据库连接配置与管理，覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库，整理相应的连接设置方法，并提供驱动缺失、认证失败和连接异常等问题的排查方向。
0
2026.11.04
本专题围绕XORM框架的结构体映射展开，说明表名与字段的命名策略、xorm标签常用属性、主键自增与时间字段自动填充，并演示Sync2自动建表、增量字段升级、索引声明与反向生成结构体的完整流程。
0
2026.11.04
本专题聚焦XORM框架的配置与连接环节，拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择，讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式，并补充容器与兼容数据库的适配经验。
0
2026.11.04
本专题聚焦XORM框架的配置与连接环节，拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择，讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式，并补充容器与兼容数据库的适配经验。
0
2026.11.04
本专题聚焦XORM框架的配置与连接环节，拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择，讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式，并补充容器与兼容数据库的适配经验。
0
2026.11.04
本专题梳理XORM框架的入门路径，从框架定位、依赖安装、连接数据库到跑通第一个增删改查示例，讲清Engine初始化、日志开启与项目目录规划，并对比GORM等同类ORM的差异，帮助Go开发者建立整体认知。
0
2026.11.04
本专题聚焦Docker Desktop容器端口映射与访问配置，整理从创建容器、设置端口绑定到验证本地服务访问的操作流程。针对端口被占用、映射配置错误、容器服务无法访问等情况，也提供相应的检查方向，方便用户完成端口配置。
0
2026.11.03
热门下载
相关下载
精品课程
共6课时 | 12.1万人学习
共79课时 | 161.7万人学习
共6课时 | 54.7万人学习
