/install timeplus-design
Timeplus Design System
Generate UI that looks like the Timeplus Console: clean, professional, and
flat, built on a neutral gray scale with a single pink accent (#D53F8C) for
primary actions, the Inter typeface, and a consistent 4px corner radius.
The normative source of truth is DESIGN.md — a
google-labs-code/design.md
token file. Its YAML front matter holds the exact color, typography, spacing,
radius, and component tokens; its prose explains how to apply them. Use the
token values verbatim.
Quick Reference
| Need | Read |
|---|---|
| Design tokens + rationale (colors, type, layout, shapes, components, do's/don'ts) | DESIGN.md |
| Copy-paste CSS, Tailwind config, and React components | references/components.md |
When to Read Reference Files
DESIGN.md— Read first for any Timeplus UI task. Provides the exact palette (gray-100…gray-900, pink-400/500, red-400/500), the Inter type scale, the 4px radius rule, the flat/no-shadow elevation model, the 4px-based spacing scale, per-component tokens and states, and the do's & don'ts.references/components.md— Read when implementing. Full CSS,tailwind.config.jscolor/font extension, CSS custom properties, and React components for buttons (primary/secondary/destructive), text inputs, toggle switches, cards, tables, links, dividers, and icons, plus accessibility (WCAG AA contrast, focus states, touch targets) and asset guidance.
Core Rules (at a glance)
- Font: Inter only — Regular (400) for content, Semi-Bold (600) for headings/controls. Never below 12px.
- Color: Neutral grays carry the UI; pink-500 marks the single primary action; red-500 is for destructive/error only.
- Surfaces: Page background is warm off-white
#F7F6F6; content sits on white cards with a 1px#DAD9DBborder. - Shape: 4px radius everywhere (pill only for toggles). No shadows — separate with borders.
- Spacing: 4px-based scale; 24px container padding, 16px between form fields.
- Buttons: 32px tall. Inputs: 40px tall. Always provide a visible 2px pink focus ring.
Validating changes
After editing DESIGN.md, optionally lint it against the format spec:
npx @google/design.md lint DESIGN.md
You can also export the tokens to Tailwind or W3C DTCG format:
npx @google/design.md export --format css-tailwind DESIGN.md > theme.css
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install timeplus-design - After installation, invoke the skill by name or use
/timeplus-design - Provide required inputs per the skill's parameter spec and get structured output
What is Timeplus Design?
Build user interfaces that match the Timeplus Console look and feel. Use this skill when generating, styling, or reviewing UI for a Timeplus product or conso... It is an AI Agent Skill for Claude Code / OpenClaw, with 41 downloads so far.
How do I install Timeplus Design?
Run "/install timeplus-design" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is Timeplus Design free?
Yes, Timeplus Design is completely free, licensed under MIT-0. You can download, install and use it at no cost.
Which platforms does Timeplus Design support?
Timeplus Design is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created Timeplus Design?
It is built and maintained by Gang Tao (@gangtao); the current version is v1.0.0.