Not in the top 1,000 by GitHub stars

chrzamz/ui-styles-skill

Offline UI style library for Claude Code — 79 design styles × bilingual prompts (zh-CN / en-US), packaged as a Claude Code Skill.

Design Engineering

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`SKILL.md`

Week of Nov 2, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → e75a79bb5d1a

No earlier version was observed for comparison.

Compare on GitHub

`skills/ui-style-creator/SKILL.md`

Week of Nov 2, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → e75a79bb5d1a

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit e75a79bb5d1a40e4feb536c7797c19341cf7b57a

11GitHub stars

0stars in 7 days

2skills in this repository

3commits in 30 days

Heat

1.3

Star growth, last 7 daysNot available
Star growth, last 24 hoursNot available
Rank movement, last 7 daysNot available
Commits, last 30 daysNot available
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekNot available

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

30-day change not yet available: not enough history.

Individual skills in this repository

ui-styles /
ui-style-creator skills/ui-style-creator

How it works

Choose a skill

ui-styles

When your agent uses it

Participate before building or changing product UI: websites, apps, demos, dashboards, forms, visual redesigns, component-library selection, themes and interaction states. Act as a practical designer: understand the product, recommend and preview a direction, preserve a project visual standard, and implement it using the existing stack. 支持风格推荐、界面制作、组件库选型、主题 token、自定义风格。Skip backend-only work and nonvisual fixes.

What it loads into context

Frontmatter

102 tokens

Always available to the agent

SKILL.md

1,522 tokens

When the skill is activated

Reference documents

380,555 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Enter before visual decisions
1. Understand the product with minimal friction
2. Recommend a direction and implementation together
3. Show a useful sample early
4. Save decisions in portable project files
5. Implement with the chosen library
6. Verify and carry decisions forward

Scripts executed separately

scripts/export_theme.py
scripts/link_project.py
tests/test_export_theme.py
tests/test_link_project.py
tests/test_profiles.py

Files

.gitignoreasset87 bytes
ATTRIBUTION.mddoc2,765 bytes
LICENSEasset1,288 bytes
README.en.mddoc7,441 bytes
README.mddoc6,980 bytes
SKILL.mdcore8,187 bytes
agents/openai.yamlasset370 bytes
assets/visual-system.template.mddoc2,688 bytes
catalog.jsonasset116,730 bytes
demo/demo-terminal.gifasset3,842,634 bytes
demo/demo.tapeasset5,563 bytes
evals/results-2026-10-21.jsonasset3,507 bytes
evals/scenarios.mddoc2,825 bytes
examples/industrial-light.tokens.jsonasset700 bytes
prompts/core/brutalism/custom.mddoc7,021 bytes
prompts/core/brutalism/style.mddoc1,810 bytes
prompts/core/flatDesign/custom.mddoc7,914 bytes
prompts/core/flatDesign/style.mddoc4,734 bytes
prompts/core/fluent2/custom.mddoc7,303 bytes
prompts/core/fluent2/style.mddoc5,006 bytes
prompts/core/materialDesign/custom.mddoc11,300 bytes
prompts/core/materialDesign/style.mddoc5,367 bytes
prompts/core/memphis/custom.mddoc12,109 bytes
prompts/core/memphis/style.mddoc2,923 bytes
prompts/core/minimalism/custom.mddoc9,522 bytes
prompts/core/minimalism/style.mddoc4,807 bytes
prompts/core/scrollNarrative/custom.mddoc8,005 bytes
prompts/core/scrollNarrative/style.mddoc5,794 bytes
prompts/core/skeuomorphism/custom.mddoc32,658 bytes
prompts/core/skeuomorphism/style.mddoc5,897 bytes
prompts/core/typography/custom.mddoc20,193 bytes
prompts/core/typography/style.mddoc3,440 bytes
prompts/interaction/mouseTracking/custom.mddoc13,993 bytes
prompts/interaction/mouseTracking/style.mddoc1,890 bytes
prompts/layout/magazine/style.mddoc3,800 bytes
prompts/retro/arcadeCRT/custom.mddoc19,991 bytes
prompts/retro/arcadeCRT/style.mddoc3,200 bytes
prompts/retro/artDeco/custom.mddoc6,039 bytes
prompts/retro/artDeco/style.mddoc2,956 bytes
prompts/retro/bauhaus/style.mddoc3,202 bytes
prompts/retro/darkAcademia/custom.mddoc6,592 bytes
prompts/retro/darkAcademia/style.mddoc3,277 bytes
prompts/retro/digitalRetro/custom.mddoc6,353 bytes
prompts/retro/digitalRetro/style.mddoc3,286 bytes
prompts/retro/filmNoir/style.mddoc3,575 bytes
prompts/retro/frutigerAero/custom.mddoc6,078 bytes
prompts/retro/frutigerAero/style.mddoc3,156 bytes
prompts/retro/midCenturyModern/custom.mddoc8,456 bytes
prompts/retro/midCenturyModern/style.mddoc3,556 bytes
prompts/retro/newspaper/custom.mddoc18,429 bytes
prompts/retro/newspaper/style.mddoc6,674 bytes
prompts/retro/retroFuturism/custom.mddoc5,749 bytes
prompts/retro/retroFuturism/style.mddoc3,253 bytes
prompts/retro/retroOS/custom.mddoc6,200 bytes
prompts/retro/retroOS/style.mddoc3,157 bytes
prompts/retro/steampunk/style.mddoc3,523 bytes
prompts/retro/swissDesign/custom.mddoc5,275 bytes
prompts/retro/swissDesign/style.mddoc1,324 bytes
prompts/retro/synthwave/style.mddoc2,784 bytes
prompts/retro/vhsAesthetic/style.mddoc4,546 bytes
prompts/visual/3dElements/custom.mddoc10,838 bytes
prompts/visual/3dElements/style.mddoc5,990 bytes
prompts/visual/accessibility/custom.mddoc33,074 bytes
prompts/visual/accessibility/style.mddoc2,370 bytes
prompts/visual/ambient/custom.mddoc11,558 bytes
prompts/visual/ambient/style.mddoc2,128 bytes
prompts/visual/antiDesign/custom.mddoc25,777 bytes
prompts/visual/antiDesign/style.mddoc9,268 bytes
prompts/visual/auroraGlass/custom.mddoc13,700 bytes
prompts/visual/auroraGlass/style.mddoc2,013 bytes
prompts/visual/bentoGrids/custom.mddoc11,823 bytes
prompts/visual/bentoGrids/style.mddoc1,508 bytes
prompts/visual/biophilic/custom.mddoc2,257 bytes
prompts/visual/biophilic/style.mddoc3,730 bytes
prompts/visual/blueprint/style.mddoc3,208 bytes
prompts/visual/claymorphism/custom.mddoc35,683 bytes
prompts/visual/claymorphism/style.mddoc8,587 bytes
prompts/visual/comicBook/style.mddoc3,711 bytes
prompts/visual/cube3d/custom.mddoc11,403 bytes
prompts/visual/cube3d/style.mddoc1,597 bytes
prompts/visual/darkMode/custom.mddoc10,888 bytes
prompts/visual/darkMode/style.mddoc1,995 bytes
prompts/visual/duotone/custom.mddoc2,704 bytes
prompts/visual/duotone/style.mddoc1,907 bytes
prompts/visual/fabric/custom.mddoc2,864 bytes
prompts/visual/fabric/style.mddoc1,831 bytes
prompts/visual/generativeArt/custom.mddoc6,072 bytes
prompts/visual/generativeArt/style.mddoc3,403 bytes
prompts/visual/glassmorphism/custom.mddoc25,305 bytes
prompts/visual/glassmorphism/style.mddoc2,634 bytes
prompts/visual/glow/custom.mddoc9,089 bytes
prompts/visual/glow/style.mddoc1,722 bytes
prompts/visual/gradients/custom.mddoc10,279 bytes
prompts/visual/gradients/style.mddoc3,424 bytes
prompts/visual/grain/custom.mddoc10,399 bytes
prompts/visual/grain/style.mddoc1,647 bytes
prompts/visual/handDrawnSketch/custom.mddoc21,995 bytes
prompts/visual/handDrawnSketch/style.mddoc8,904 bytes
prompts/visual/holographic/custom.mddoc8,034 bytes
prompts/visual/holographic/style.mddoc1,811 bytes
prompts/visual/holographicFoil/custom.mddoc471 bytes
prompts/visual/holographicFoil/style.mddoc1,790 bytes
prompts/visual/industrial/custom.mddoc29,701 bytes
prompts/visual/industrial/style.mddoc2,922 bytes
prompts/visual/inkWash/custom.mddoc13,647 bytes
prompts/visual/inkWash/style.mddoc9,109 bytes
prompts/visual/kawaiiMinimal/custom.mddoc30,618 bytes
prompts/visual/kawaiiMinimal/style.mddoc4,780 bytes
prompts/visual/leather/custom.mddoc14,815 bytes
prompts/visual/leather/style.mddoc3,402 bytes
prompts/visual/light/custom.mddoc11,246 bytes
prompts/visual/light/style.mddoc12,155 bytes
prompts/visual/liminalSpace/custom.mddoc10,645 bytes
prompts/visual/liminalSpace/style.mddoc1,543 bytes
prompts/visual/liquid/custom.mddoc10,500 bytes
prompts/visual/liquid/style.mddoc2,824 bytes
prompts/visual/memphis/custom.mddoc28,165 bytes
prompts/visual/memphis/style.mddoc2,923 bytes
prompts/visual/monochrome/custom.mddoc28,944 bytes
prompts/visual/monochrome/style.mddoc6,333 bytes
prompts/visual/natural/custom.mddoc454 bytes
prompts/visual/natural/style.mddoc1,818 bytes
prompts/visual/nature/custom.mddoc24,019 bytes
prompts/visual/nature/style.mddoc11,225 bytes
prompts/visual/neoBrutalism/custom.mddoc34,086 bytes
prompts/visual/neoBrutalism/style.mddoc1,550 bytes
prompts/visual/neon/custom.mddoc7,753 bytes
prompts/visual/neon/style.mddoc1,601 bytes
prompts/visual/neonCyberpunk/custom.mddoc19,726 bytes
prompts/visual/neonCyberpunk/style.mddoc5,192 bytes
prompts/visual/neonNoir/custom.mddoc11,218 bytes
prompts/visual/neonNoir/style.mddoc5,101 bytes
prompts/visual/organic/custom.mddoc7,524 bytes
prompts/visual/organic/style.mddoc1,709 bytes
prompts/visual/outlineStyle/custom.mddoc648 bytes
prompts/visual/outlineStyle/style.mddoc1,611 bytes
prompts/visual/paperCutout/custom.mddoc432 bytes
prompts/visual/paperCutout/style.mddoc1,715 bytes
prompts/visual/particle/custom.mddoc10,715 bytes
prompts/visual/particle/style.mddoc1,737 bytes
prompts/visual/popArt/style.mddoc2,903 bytes
prompts/visual/scandi/custom.mddoc27,683 bytes
prompts/visual/scandi/style.mddoc2,797 bytes
prompts/visual/sciFiHud/custom.mddoc29,775 bytes
prompts/visual/sciFiHud/style.mddoc9,104 bytes
prompts/visual/smoke/custom.mddoc13,977 bytes
prompts/visual/smoke/style.mddoc1,694 bytes
prompts/visual/soft-ui/custom.mddoc10,242 bytes
prompts/visual/soft-ui/style.mddoc5,231 bytes
prompts/visual/softUI/custom.mddoc6,304 bytes
prompts/visual/softUI/style.mddoc1,742 bytes
prompts/visual/solarpunk/custom.mddoc8,017 bytes
prompts/visual/solarpunk/style.mddoc1,774 bytes
prompts/visual/spotlight/custom.mddoc455 bytes
prompts/visual/spotlight/style.mddoc1,602 bytes
prompts/visual/utilityFirst/custom.mddoc8,191 bytes
prompts/visual/utilityFirst/style.mddoc1,817 bytes
prompts/visual/vaporwave/custom.mddoc8,979 bytes
prompts/visual/vaporwave/style.mddoc1,913 bytes
prompts/visual/wabiSabi/custom.mddoc27,216 bytes
prompts/visual/wabiSabi/style.mddoc1,797 bytes
prompts/visual/y2k/custom.mddoc29,997 bytes
prompts/visual/y2k/style.mddoc3,405 bytes
references/agent-integration.mddoc4,034 bytes
references/library-selection.mddoc4,246 bytes
references/project-standard.mddoc4,618 bytes
references/theme-adapters.mddoc7,855 bytes
references/visual-review.mddoc2,573 bytes
scripts/export_theme.pyruns13,896 bytes
scripts/link_project.pyruns5,084 bytes
tests/test_export_theme.pyruns11,387 bytes
tests/test_link_project.pyruns3,670 bytes
tests/test_profiles.pyruns8,782 bytes

No excerpt is shown for this license. Read the source on GitHub.

View the complete source on GitHub

Skills included

ui-styles
ui-style-creator

Repository facts

License: No license detected
Created: May 17, 2026
Last pushed: Nov 3, 2026
Forks: 1
Open issues: 0
Project activity: Active

Before you install

Local scripts

Automated signals, not a guarantee

Checked Nov 6, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 4 notes

skills/ui-style-creator/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/ui-style-creator/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/ui-style-creator/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/ui-style-creator/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed

No broad tool permissions
No dangerous shell commands
105 network referencesin 23 files: prompts/visual/inkWash/custom.md:35 prompts/visual/handDrawnSketch/custom.md:10 prompts/visual/inkWash/style.md:80 and 20 more
No hidden or obfuscated text
No instruction overrides
6 executable scriptsin 6 files: scripts/export_theme.py:1 scripts/link_project.py:1 ui-style-creator/scripts/profiles.py:1 and 3 more
6 references to secretsin 4 files: tests/test_export_theme.py:159 tests/test_profiles.py:90 .gitignore:7 and 1 more
No requests to vote in Hot

Show all 117 signals by file

`.gitignore`

Access to secretsline 7
```
[Credential-related source omitted]
```

`ATTRIBUTION.md`

Network accessline 7

> **TonnyWong1052/UI-Prompt** — https://github.com/TonnyWong1052/UI-Prompt

`LICENSE`

Network accessline 25

NOTE: The UI style prompts under `prompts/` are mirrored from the upstream project https://github.com/TonnyWong1052/UI-Prompt and remain the intellectual

Network accessline 26

project https://github.com/TonnyWong1052/UI-Prompt and remain the intellectual

`README.en.md`

Network accessline 51

# Claude Code, user scope git clone https://github.com/chrzamz/ui-styles-skill.git ~/.claude/skills/ui-styles

Network accessline 52

git clone https://github.com/chrzamz/ui-styles-skill.git ~/.claude/skills/ui-styles

Network accessline 54

# Codex, user scope, following current documented discovery paths git clone https://github.com/chrzamz/ui-styles-skill.git ~/.agents/skills/ui-styles

Network accessline 55

git clone https://github.com/chrzamz/ui-styles-skill.git ~/.agents/skills/ui-styles

`README.md`

Network accessline 51

# Claude Code，用户级 git clone https://github.com/chrzamz/ui-styles-skill.git ~/.claude/skills/ui-styles

Network accessline 52

git clone https://github.com/chrzamz/ui-styles-skill.git ~/.claude/skills/ui-styles

Network accessline 54

# Codex，用户级 git clone https://github.com/chrzamz/ui-styles-skill.git ~/.agents/skills/ui-styles

Network accessline 55

git clone https://github.com/chrzamz/ui-styles-skill.git ~/.agents/skills/ui-styles

`catalog.json`

Network accessline 1

{   "version": "1.0.0",   "source": "https://github.com/TonnyWong1052/UI-Prompt",

Network accessline 2

"version": "1.0.0",   "source": "https://github.com/TonnyWong1052/UI-Prompt",   "categories": {

Network accessline 3

"source": "https://github.com/TonnyWong1052/UI-Prompt",

`demo/demo.tape`

Network accessline 126

Enter Sleep 500ms Type "printf '\\033[38;5;245m● Bash(npm run dev)\\033[0m\\n  \\033[2m└ ▲ Next.js 16  -  http://localhost:3002\\033[0m\\n\\n'"

Network accessline 127

Sleep 500ms Type "printf '\\033[38;5;245m● Bash(npm run dev)\\033[0m\\n  \\033[2m└ ▲ Next.js 16  -  http://localhost:3002\\033[0m\\n\\n'" Enter

Network accessline 128

Type "printf '\\033[38;5;245m● Bash(npm run dev)\\033[0m\\n  \\033[2m└ ▲ Next.js 16  -  http://localhost:3002\\033[0m\\n\\n'"

Network accessline 133

Type@5ms "● 跑通了 → http://localhost:3002/preview"

`prompts/core/typography/custom.md`

Network accessline 303

- 正文文字与背景对比度至少 4.5:1（WCAG AA）    - 大标题文字与背景对比度至少 3:1    - 使用工具检查：https://webaim.org/resources/contrastchecker/

Network accessline 305

- 使用工具检查：https://webaim.org/resources/contrastchecker/

Network accessline 638

- Body text vs background: minimum 4.5:1 (WCAG AA)    - Large text vs background: minimum 3:1    - Check with: https://webaim.org/resources/contrastchecker/

Network accessline 640

- Check with: https://webaim.org/resources/contrastchecker/

`prompts/visual/accessibility/custom.md`

Network accessline 517

cursor: pointer;   appearance: none;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' str

Network accessline 518

appearance: none;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round

Network accessline 519

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline poin

`prompts/visual/grain/custom.md`

Network accessline 34

<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'>

Network accessline 135

<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'>

`prompts/visual/handDrawnSketch/custom.md`

Network accessline 10

- 主标题字体：Caveat（支持粗细 400-700）      \`\`\`css      @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');

Network accessline 12

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');

Network accessline 22

- 正文字体：Patrick Hand（更易读）      \`\`\`css      @import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

Network accessline 24

@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

Network accessline 33

- 装饰字体：Reenie Beanie（更随性）      \`\`\`css      @import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');

Network accessline 35

@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');

Network accessline 435

- Title font: Caveat (supports weights 400-700)      \`\`\`css      @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');

Network accessline 437

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');

Network accessline 447

- Body font: Patrick Hand (more readable)      \`\`\`css      @import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

Network accessline 449

@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

Network accessline 458

- Decorative font: Reenie Beanie (more casual)      \`\`\`css      @import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');

Network accessline 460

@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');

`prompts/visual/industrial/custom.md`

Network accessline 788

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>工业监控系统</title>   <script src="https://cdn.tailwindcss.com"></script>

Network accessline 789

<title>工业监控系统</title>   <script src="https://cdn.tailwindcss.com"></script>   <style>

Network accessline 790

<script src="https://cdn.tailwindcss.com"></script>

`prompts/visual/inkWash/custom.md`

Network accessline 35

<!-- HTML 格式 --> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 36

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 37

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 38

<link href="https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Ma+Shan+Zheng&family=Zhi+Mang+Xing&family=ZCOOL+XiaoWei&family=ZCOOL+KuaiLe&family=Noto+Serif+SC:wght@300;700&display=swap" rel="stylesheet">

Network accessline 42

// JSX/React 格式（推荐） <>   <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 43

<>   <link rel="preconnect" href="https://fonts.googleapis.com" />   <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />

Network accessline 44

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 45

<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />

Network accessline 46

<link href="https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Ma+Shan+Zheng&family=Zhi+Mang+Xing&family=ZCOOL+XiaoWei&family=ZCOOL+KuaiLe&family=Noto+Serif+SC:wght@300;700&display=swap" rel="stylesheet" />

Network accessline 100

- 页面背景：宣纸白 #F8F5F0，叠加细腻纹理    - 区域变化：象牙白 #FFFFF0、米色 #FAF0E6 用于不同章节    - 纹理：`url("https://www.transparenttextures.com/patterns/p6.png")`

Network accessline 102

- 纹理：`url("https://www.transparenttextures.com/patterns/p6.png")`

Network accessline 202

<!-- HTML Format --> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 203

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 204

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 205

<link href="https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Ma+Shan+Zheng&family=Zhi+Mang+Xing&family=ZCOOL+XiaoWei&family=ZCOOL+KuaiLe&family=Noto+Serif+SC:wght@300;700&display=swap" rel="stylesheet">

Network accessline 209

// JSX/React Format (Recommended) <>   <link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 210

<>   <link rel="preconnect" href="https://fonts.googleapis.com" />   <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />

Network accessline 211

<link rel="preconnect" href="https://fonts.googleapis.com" />

Network accessline 212

<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />

Network accessline 213

<link href="https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Ma+Shan+Zheng&family=Zhi+Mang+Xing&family=ZCOOL+XiaoWei&family=ZCOOL+KuaiLe&family=Noto+Serif+SC:wght@300;700&display=swap" rel="stylesheet" />

Network accessline 278

- Ivory: #FFFFF0    - Beige: #FAF0E6    - Texture: `url("https://www.transparenttextures.com/patterns/p6.png")`

Network accessline 280

- Texture: `url("https://www.transparenttextures.com/patterns/p6.png")`

`prompts/visual/inkWash/style.md`

Network accessline 80

<!-- HTML 格式 --> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 81

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 82

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 83

<link href="https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Ma+Shan+Zheng&family=Zhi+Mang+Xing&family=ZCOOL+XiaoWei&family=ZCOOL+KuaiLe&family=Noto+Serif+SC:wght@300;700&display=swap" rel="stylesheet">

Network accessline 193

<!-- HTML Format --> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 194

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 195

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 196

<link href="https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Ma+Shan+Zheng&family=Zhi+Mang+Xing&family=ZCOOL+XiaoWei&family=ZCOOL+KuaiLe&family=Noto+Serif+SC:wght@300;700&display=swap" rel="stylesheet">

`prompts/visual/kawaiiMinimal/custom.md`

Network accessline 502

transition: all 0.3s ease;   appearance: none;   background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23FFB6D9' stroke-

Network accessline 503

appearance: none;   background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23FFB6D9' stroke-width='2' stroke-linecap='rou

Network accessline 504

background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23FFB6D9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

`prompts/visual/memphis/custom.md`

Network accessline 156

width: 200px;   height: 50px;   background-image: url("data:image/svg+xml,%3Csvg width='200' height='50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 25 Q 25 0, 50 25 T 100 25 T 150 25 T 200 25' stroke='%23000000' stroke-width='5' fil

Network accessline 157

height: 50px;   background-image: url("data:image/svg+xml,%3Csvg width='200' height='50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 25 Q 25 0, 50 25 T 100 25 T 150 25 T 200 25' stroke='%23000000' stroke-width='5' fill='none'/%3E%3C/

Network accessline 158

background-image: url("data:image/svg+xml,%3Csvg width='200' height='50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 25 Q 25 0, 50 25 T 100 25 T 150 25 T 200 25' stroke='%23000000' stroke-width='5' fill='none'/%3E%3C/svg%3E");

`prompts/visual/monochrome/custom.md`

Network accessline 575

transition: all 0.2s ease-out;   appearance: none;   background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%234B5563' str

Network accessline 576

appearance: none;   background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%234B5563' stroke-width='2' stroke-linecap='rou

Network accessline 577

background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%234B5563' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");

`prompts/visual/neoBrutalism/custom.md`

Network accessline 406

cursor: pointer;   appearance: none;   background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L10 12L15 7' stroke='%23000000' stroke-width=

Network accessline 407

appearance: none;   background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L10 12L15 7' stroke='%23000000' stroke-width='3' stroke-linecap=

Network accessline 408

background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L10 12L15 7' stroke='%23000000' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%

Network accessline 1170

cursor: pointer;   appearance: none;   background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L10 12L15 7' stroke='%23000000' stroke-width=

Network accessline 1171

appearance: none;   background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L10 12L15 7' stroke='%23000000' stroke-width='3' stroke-linecap=

Network accessline 1172

background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L10 12L15 7' stroke='%23000000' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%

`prompts/visual/scandi/custom.md`

Network accessline 683

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>北欧极简仪表板</title>   <script src="https://cdn.tailwindcss.com"></script>

Network accessline 684

<title>北欧极简仪表板</title>   <script src="https://cdn.tailwindcss.com"></script>   <style>

Network accessline 685

<script src="https://cdn.tailwindcss.com"></script>

`prompts/visual/wabiSabi/custom.md`

Network accessline 444

/* 字体导入 */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@300;400;600&family=Inter:wght@300;400;500&display=swap');

Network accessline 445

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@300;400;600&family=Inter:wght@300;400;500&display=swap');

`references/agent-integration.md`

Network accessline 47

- [Codex skill discovery](https://learn.chatgpt.com/docs/build-skills)

Network accessline 48

- [Codex project instructions](https://learn.chatgpt.com/docs/agent-configuration/agents-md)

Network accessline 49

- [Claude Code skills](https://code.claude.com/docs/en/skills)

Network accessline 50

- [Claude Code shared instructions and imports](https://code.claude.com/docs/en/memory#share-one-file-with-other-coding-tools)

`references/library-selection.md`

Network accessline 35

- [Ant Design](https://ant.design/docs/react/introduce/)、[Semi Design](https://semi.design/zh-CN/start/introduction)、[Arco React](https://arco.design/react/docs/start)

Network accessline 36

- [MUI](https://mui.com/material-ui/getting-started/)、[Mantine](https://mantine.dev/getting-started/)、[Chakra UI](https://chakra-ui.com/docs/get-started/installation)

Network accessline 37

- [Radix Primitives](https://www.radix-ui.com/primitives/docs/overview/introduction)、[React Aria](https://react-spectrum.adobe.com/react-aria/)、[shadcn/ui](https://ui.shadcn.com/docs)

Network accessline 38

- [Element Plus](https://element-plus.org/en-US/guide/design.html)、[Naive UI](https://www.naiveui.com/)、[Arco Vue](https://arco.design/vue/docs/start)

`references/theme-adapters.md`

Network accessline 57

- Ant Design 文档显示 **6.6.7**；采用自 5.x 引入的 ConfigProvider/token API，4.x Less 主题不兼容。参考：[主题与 Token API](https://ant.design/docs/react/customize-theme/)、[ThemeConfig 源码](https://github.com/ant-design/ant-design/blob/master/components/config-provi

Network accessline 58

- MUI 当前文档显示 **9.5.0**；使用 `@mui/material/styles` 的 `createTheme` 基础 API，不假设项目已采用新版 CSS variables/colorSchemes。参考：[Theming](https://mui.com/material-ui/customization/theming/)、[Palette](https://mui.com/material-ui/customization/palette/)、[组件

Network accessline 59

- Semi 使用 **2.x** 文档的语义 CSS 变量与暗色入口。参考：[定制主题](https://semi.design/zh-CN/advanced/customize-theme)、[暗色模式](https://semi.design/zh-CN/advanced/dark-mode)、[全局变量源码](https://github.com/DouyinFE/semi-design/blob/main/packages/semi-theme-default/sc

`scripts/export_theme.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

`scripts/link_project.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

`skills/ui-style-creator/scripts/profiles.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```
Access to secretsline 82
```
[Credential-related source omitted]
```

`tests/test_export_theme.py`

Executable scriptline 1
```
Executable file
```

Network accessline 38

def test_color_injection_rejected_for_all_adapters(self):         for bad in ['red; } body { display: none', 'url(https://example.com)', '#abcdef\n!important', 'var(--x); color:red']:

Network accessline 39

for bad in ['red; } body { display: none', 'url(https://example.com)', '#abcdef\n!important', 'var(--x); color:red']:

Access to secretsline 159
```
[Credential-related source omitted]
```
Access to secretsline 162
```
[Credential-related source omitted]
```

`tests/test_link_project.py`

Executable scriptline 1
```
Executable file
```

`tests/test_profiles.py`

Executable scriptline 1
```
Executable file
```
Access to secretsline 90
```
[Credential-related source omitted]
```
Access to secretsline 101
```
[Credential-related source omitted]
```

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 107 facts

Network access in prose of documentationATTRIBUTION.md:7Low confidence
Network access in code of documentationREADME.en.md:51Low confidence
Network access in code of documentationREADME.en.md:52Low confidence
Network access in code of documentationREADME.en.md:54Low confidence
Network access in code of documentationREADME.en.md:55Low confidence
Network access in code of documentationREADME.md:51Low confidence
Network access in code of documentationREADME.md:52Low confidence
Network access in code of documentationREADME.md:54Low confidence
Network access in code of documentationREADME.md:55Low confidence
Network access in prose of documentationprompts/core/typography/custom.md:303Low confidence
Network access in prose of documentationprompts/core/typography/custom.md:305Low confidence
Network access in prose of documentationprompts/core/typography/custom.md:638Low confidence
Network access in prose of documentationprompts/core/typography/custom.md:640Low confidence
Network access in code of documentationprompts/visual/accessibility/custom.md:517Low confidence
Network access in code of documentationprompts/visual/accessibility/custom.md:518Low confidence
Network access in code of documentationprompts/visual/accessibility/custom.md:519Low confidence
Network access in code of documentationprompts/visual/grain/custom.md:34Low confidence
Network access in code of documentationprompts/visual/grain/custom.md:135Low confidence
Network access in prose of documentationprompts/visual/handDrawnSketch/custom.md:10Low confidence
Network access in prose of documentationprompts/visual/handDrawnSketch/custom.md:12Low confidence
Network access in prose of documentationprompts/visual/handDrawnSketch/custom.md:22Low confidence
Network access in prose of documentationprompts/visual/handDrawnSketch/custom.md:24Low confidence
Network access in prose of documentationprompts/visual/handDrawnSketch/custom.md:33Low confidence
Network access in prose of documentationprompts/visual/handDrawnSketch/custom.md:35Low confidence
Network access in prose of documentationprompts/visual/handDrawnSketch/custom.md:435Low confidence
Network access in prose of documentationprompts/visual/handDrawnSketch/custom.md:437Low confidence
Network access in prose of documentationprompts/visual/handDrawnSketch/custom.md:447Low confidence
Network access in prose of documentationprompts/visual/handDrawnSketch/custom.md:449Low confidence
Network access in prose of documentationprompts/visual/handDrawnSketch/custom.md:458Low confidence
Network access in prose of documentationprompts/visual/handDrawnSketch/custom.md:460Low confidence
Network access in code of documentationprompts/visual/industrial/custom.md:788Low confidence
Network access in code of documentationprompts/visual/industrial/custom.md:789Low confidence
Network access in code of documentationprompts/visual/industrial/custom.md:790Low confidence
Network access in code of documentationprompts/visual/inkWash/custom.md:35Low confidence
Network access in code of documentationprompts/visual/inkWash/custom.md:36Low confidence
Network access in code of documentationprompts/visual/inkWash/custom.md:37Low confidence
Network access in code of documentationprompts/visual/inkWash/custom.md:38Low confidence
Network access in code of documentationprompts/visual/inkWash/custom.md:42Low confidence
Network access in code of documentationprompts/visual/inkWash/custom.md:43Low confidence
Network access in code of documentationprompts/visual/inkWash/custom.md:44Low confidence
Network access in code of documentationprompts/visual/inkWash/custom.md:45Low confidence
Network access in code of documentationprompts/visual/inkWash/custom.md:46Low confidence
Network access in prose of documentationprompts/visual/inkWash/custom.md:100Low confidence
Network access in prose of documentationprompts/visual/inkWash/custom.md:102Low confidence
Network access in code of documentationprompts/visual/inkWash/custom.md:202Low confidence
Network access in code of documentationprompts/visual/inkWash/custom.md:203Low confidence
Network access in code of documentationprompts/visual/inkWash/custom.md:204Low confidence
Network access in code of documentationprompts/visual/inkWash/custom.md:205Low confidence
Network access in code of documentationprompts/visual/inkWash/custom.md:209Low confidence
Network access in code of documentationprompts/visual/inkWash/custom.md:210Low confidence

and 57 more

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Compatible	Standard SKILL.md SKILL.md	`.claude/skills/<skill-name>/`
Codex	Compatible	Standard SKILL.md SKILL.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

chrzamz/ui-styles-skill

History

SKILL.md

skills/ui-style-creator/SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

ui-styles

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

ui-style-creator

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Before you install

.gitignore

ATTRIBUTION.md

LICENSE

README.en.md

README.md

catalog.json

demo/demo.tape

prompts/core/typography/custom.md

prompts/visual/accessibility/custom.md

prompts/visual/grain/custom.md

prompts/visual/handDrawnSketch/custom.md

prompts/visual/industrial/custom.md

prompts/visual/inkWash/custom.md

prompts/visual/inkWash/style.md

prompts/visual/kawaiiMinimal/custom.md

prompts/visual/memphis/custom.md

prompts/visual/monochrome/custom.md

prompts/visual/neoBrutalism/custom.md

prompts/visual/scandi/custom.md

prompts/visual/wabiSabi/custom.md

references/agent-integration.md

references/library-selection.md

references/theme-adapters.md

scripts/export_theme.py

scripts/link_project.py

skills/ui-style-creator/scripts/profiles.py

tests/test_export_theme.py

tests/test_link_project.py

tests/test_profiles.py

How the signals fit together

Works with

You might also use

edisonmbli/refactoring-ui-skill

Devesh-Shirsath/spotkit

Leonxlnx/taste-skill

Owl-Listener/designer-skills

dominikmartn/hue

xiaopu-ai/web-design

`SKILL.md`

`skills/ui-style-creator/SKILL.md`

`.gitignore`

`ATTRIBUTION.md`

`LICENSE`

`README.en.md`

`README.md`

`catalog.json`

`demo/demo.tape`

`prompts/core/typography/custom.md`

`prompts/visual/accessibility/custom.md`

`prompts/visual/grain/custom.md`

`prompts/visual/handDrawnSketch/custom.md`

`prompts/visual/industrial/custom.md`

`prompts/visual/inkWash/custom.md`

`prompts/visual/inkWash/style.md`

`prompts/visual/kawaiiMinimal/custom.md`

`prompts/visual/memphis/custom.md`

`prompts/visual/monochrome/custom.md`

`prompts/visual/neoBrutalism/custom.md`

`prompts/visual/scandi/custom.md`

`prompts/visual/wabiSabi/custom.md`

`references/agent-integration.md`

`references/library-selection.md`

`references/theme-adapters.md`

`scripts/export_theme.py`

`scripts/link_project.py`

`skills/ui-style-creator/scripts/profiles.py`

`tests/test_export_theme.py`

`tests/test_link_project.py`

`tests/test_profiles.py`