← 返回 Skills 市场

Timeplus Design

Name: Timeplus Design
Author: gangtao

作者 Gang Tao · GitHub ↗ · v1.0.0 · MIT-0

cross-platform ✓ 安全检测通过

总下载

当前安装

版本数

在 OpenClaw 中安装

/install 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...

使用说明 (SKILL.md)

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.js color/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 #DAD9DB border.
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

安全使用建议

Safe to install for UI styling work. Before copying the examples into a privacy-sensitive or internal product, consider self-hosting Inter or documenting the Google Fonts third-party request; only run the optional npx commands if you are comfortable executing that npm package in your environment.

能力评估

✓ Purpose & Capability

The files coherently describe a Timeplus Console design system with colors, typography, spacing, CSS, Tailwind, and React snippets matching the stated UI-styling purpose.

✓ Instruction Scope

Runtime instructions are limited to reading design references and applying visual component guidance; I found no role overrides, hidden directives, credential handling, broad file access, or unrelated agent behavior.

ℹ Install Mechanism

The artifact contains markdown documentation only and metadata reports no declared dependencies or executable scripts. It does include optional user-run npx validation/export commands.

ℹ Credentials

Google Fonts loading is disclosed in the skill and proportionate for a design-system reference, but downstream apps using it will make third-party browser requests to Google.

✓ Persistence & Privilege

I found no persistence, background workers, privilege escalation, local indexing, credential/session access, or automatic mutation behavior.

如何使用

确保已安装 OpenClaw（本地或 Docker 部署）
在对话框中输入安装命令：/install timeplus-design
安装完成后，直接呼叫该 Skill 的名称或使用 /timeplus-design 触发
根据 Skill 的参数说明提供必要输入，即可获得结构化输出

版本历史

v1.0.0

Initial release of timeplus-design skill. - Provides documentation and design tokens to build Timeplus Console–styled UIs. - Includes a normative DESIGN.md with exact color, typography, spacing, shape, and component specs. - Offers ready-to-adapt CSS, Tailwind, and React component implementations. - No runtime dependencies; documentation only. - Supports UI theming with Inter font, 4px radius, flat surfaces, and strict color rules.

元数据

Slug timeplus-design

版本 1.0.0

许可证 MIT-0

累计安装 0

当前安装数 0

历史版本数 1

常见问题

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... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 41 次。

如何安装 Timeplus Design？

在 OpenClaw 或 Claude Code 对话框中运行命令「/install timeplus-design」即可一键安装，无需额外配置。

Timeplus Design 是免费的吗？

是的，Timeplus Design 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。

Timeplus Design 支持哪些平台？

Timeplus Design 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。

谁开发了 Timeplus Design？

由 Gang Tao（@gangtao）开发并维护，当前版本 v1.0.0。