omd

Name: omd
Author: kwakseongjae

365stars35forks

How to install omd?

kwakseongjae/oh-my-design/omd

$npx -y skills add kwakseongjae/oh-my-design --skill omd

Installs into the current project.

Summary

Apply a project's DESIGN.md (Google Stitch format + OmD v0.1 brand-philosophy layer) as authoritative brand context when generating or modifying UI. Use whenever the user asks for UI work — new components, styling changes, layout, microcopy, empty/error states, motion — and a DES

Files · 1

View on GitHub

SKILL.md

1	# OmD — Brand Context for Claude Code
2
3	You are about to generate or modify UI for a project that ships a `DESIGN.md` at its root. This file is the brand's authoritative voice. Your job is to consume it correctly and refuse to default to AI-slop patterns.
4
5	## Step 1 — Detect
6
7	Check for these in order:
8
9	1. `./DESIGN.md` at the project root (primary).
10	2. `./.stitch/DESIGN.md` (Google Stitch's internal location — still valid OmD).
11	3. `./spec/omd-*.md` if the project ships a custom-versioned spec.
12
13	If none exist, stop. Tell the user: "No DESIGN.md found. Run `npx omd init` to scaffold one, or proceed without brand context (output will be generic)." Do not invent brand rules.
14
15	If a `DESIGN.md` exists, read the whole file before writing a single line of UI. Do not skim.
16
17	## Step 2 — Parse
18
19	Look at the frontmatter:
20
21	```yaml
22	---
23	omd: 0.1
24	brand: <name>
25	---
26	```
27
28	- Frontmatter present with `omd:` key → full OmD file. Sections 10–15 are authoritative.
29	- No frontmatter → Google Stitch base only. Treat sections 1–9 as authoritative; do not invent sections 10–15.
30
31	The 15 possible sections:
32
33	```
34	Base (Google Stitch, required)
35	1. Visual Theme & Atmosphere — the "feel" paragraph
36	2. Color Palette & Roles — named + hex, always paired
37	3. Typography Rules — family, scale, tracking, features
38	4. Component Stylings — button, card, input, nav specs
39	5. Layout Principles — spacing scale, grid, radius
40	6. Depth & Elevation — shadow system
41	7. Do's and Don'ts — explicit constraints
42	8. Responsive Behavior — breakpoints, touch targets
43	9. Agent Prompt Guide — quick-ref + example prompts
44
45	Brand Philosophy (OmD v0.1)
46	10. Voice & Tone — microcopy constraints
47	11. Brand Narrative — the "why"
48	12. Principles — first-principles rules
49	13. Personas — who this is for
50	14. States — empty/error/loading patterns
51	15. Motion & Easing — duration + easing tokens
52	```
53
54	## Step 3 — Apply (the contract)
55
56	When generating UI, the file's sections act as constraints, not suggestions.
57
58	### Hard rules
59
60	1. Every color you use MUST appear in section 2. If you need a color that isn't there, stop and ask. Do not invent hex values. Do not "borrow" a complementary color.
61	2. Every font MUST appear in section 3. Never substitute Inter/Roboto/Arial/system-ui as a fallback — if they aren't in the stack, they aren't allowed.
62	3. Component shapes (radius, padding, shadow) MUST come from sections 4–6. If a radius scale is declared, values outside it are forbidden.
63	4. Microcopy MUST match section 10. If "forbidden phrases" are listed, they are banned. If tone mappings are given, follow them. A button label that violates the voice is wrong even if the component shape is correct.
64	5. Empty / error / loading / skeleton states MUST come from section 14. Do not invent a "No data found 😔" card. Use the declared treatment.
65	6. Motion MUST use section 15 tokens. If durations are named (`motion-fast`, `motion-standard`), wire them to those names — do not hardcode `200ms`.
66	7. Principles (section 12) are tiebreakers. When two valid interpretations compete, the principles decide. They override your defaults.
67	8. Do's and Don'ts (section 7) are non-negotiable. A "Don't" is a hard block.
68
69	### Soft rules
70
71	- Section 1 (Visual Theme) sets the mood. Use it to resolve ambiguity — "how loud should this hero be?" is answered there, not by asking the user.
72	- Section 11 (Narrative) and section 13 (Personas) are context for judgement calls. When generating a specific concrete artifact (a balance card, a transaction row), ask: "Would 정민 at 8:47am on the subway recognize this?" If no, revise.
73
74	### What to never do
75
76	OmD files exist specifically to prevent these defaults. If you find yourself about to do any of the following, stop:
77
78	- Inter / Roboto / Arial / Fraunces / system-ui as a typography default — these are the named AI-slop fonts. If the file says Inter, fine; if not, never add it.
79	- Purple on white (`#A855F7`-ish on `#FFFFFF`) — the most overfitted AI palette.
80	- Unjustified gradient backgrounds — especially purple-to-pink or blue-to-purple hero gradients.
81	- Left-accent cards — the 4px colored vertical bar on the left of a card is a Bootstrap-era reflex. Banned unless the file declares it.
82	- **SVG line-drawing illustr

People who liked this also viewed

6 picks

Type

omd

365stars35forks

View on GitHub

How to install omd?

kwakseongjae/oh-my-design/omd

$npx -y skills add kwakseongjae/oh-my-design --skill omd

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# OmD — Brand Context for Claude Code
2
3	You are about to generate or modify UI for a project that ships a `DESIGN.md` at its root. This file is the brand's authoritative voice. Your job is to consume it correctly and refuse to default to AI-slop patterns.
4
5	## Step 1 — Detect
6
7	Check for these in order:
8
9	1. `./DESIGN.md` at the project root (primary).
10	2. `./.stitch/DESIGN.md` (Google Stitch's internal location — still valid OmD).
11	3. `./spec/omd-*.md` if the project ships a custom-versioned spec.
12
13	If none exist, stop. Tell the user: "No DESIGN.md found. Run `npx omd init` to scaffold one, or proceed without brand context (output will be generic)." Do not invent brand rules.
14
15	If a `DESIGN.md` exists, read the whole file before writing a single line of UI. Do not skim.
16
17	## Step 2 — Parse
18
19	Look at the frontmatter:
20
21	```yaml
22	---
23	omd: 0.1
24	brand: <name>
25	---
26	```
27
28	- Frontmatter present with `omd:` key → full OmD file. Sections 10–15 are authoritative.
29	- No frontmatter → Google Stitch base only. Treat sections 1–9 as authoritative; do not invent sections 10–15.
30
31	The 15 possible sections:
32
33	```
34	Base (Google Stitch, required)
35	1. Visual Theme & Atmosphere — the "feel" paragraph
36	2. Color Palette & Roles — named + hex, always paired
37	3. Typography Rules — family, scale, tracking, features
38	4. Component Stylings — button, card, input, nav specs
39	5. Layout Principles — spacing scale, grid, radius
40	6. Depth & Elevation — shadow system
41	7. Do's and Don'ts — explicit constraints
42	8. Responsive Behavior — breakpoints, touch targets
43	9. Agent Prompt Guide — quick-ref + example prompts
44
45	Brand Philosophy (OmD v0.1)
46	10. Voice & Tone — microcopy constraints
47	11. Brand Narrative — the "why"
48	12. Principles — first-principles rules
49	13. Personas — who this is for
50	14. States — empty/error/loading patterns
51	15. Motion & Easing — duration + easing tokens
52	```
53
54	## Step 3 — Apply (the contract)
55
56	When generating UI, the file's sections act as constraints, not suggestions.
57
58	### Hard rules
59
60	1. Every color you use MUST appear in section 2. If you need a color that isn't there, stop and ask. Do not invent hex values. Do not "borrow" a complementary color.
61	2. Every font MUST appear in section 3. Never substitute Inter/Roboto/Arial/system-ui as a fallback — if they aren't in the stack, they aren't allowed.
62	3. Component shapes (radius, padding, shadow) MUST come from sections 4–6. If a radius scale is declared, values outside it are forbidden.
63	4. Microcopy MUST match section 10. If "forbidden phrases" are listed, they are banned. If tone mappings are given, follow them. A button label that violates the voice is wrong even if the component shape is correct.
64	5. Empty / error / loading / skeleton states MUST come from section 14. Do not invent a "No data found 😔" card. Use the declared treatment.
65	6. Motion MUST use section 15 tokens. If durations are named (`motion-fast`, `motion-standard`), wire them to those names — do not hardcode `200ms`.
66	7. Principles (section 12) are tiebreakers. When two valid interpretations compete, the principles decide. They override your defaults.
67	8. Do's and Don'ts (section 7) are non-negotiable. A "Don't" is a hard block.
68
69	### Soft rules
70
71	- Section 1 (Visual Theme) sets the mood. Use it to resolve ambiguity — "how loud should this hero be?" is answered there, not by asking the user.
72	- Section 11 (Narrative) and section 13 (Personas) are context for judgement calls. When generating a specific concrete artifact (a balance card, a transaction row), ask: "Would 정민 at 8:47am on the subway recognize this?" If no, revise.
73
74	### What to never do
75
76	OmD files exist specifically to prevent these defaults. If you find yourself about to do any of the following, stop:
77
78	- Inter / Roboto / Arial / Fraunces / system-ui as a typography default — these are the named AI-slop fonts. If the file says Inter, fine; if not, never add it.
79	- Purple on white (`#A855F7`-ish on `#FFFFFF`) — the most overfitted AI palette.
80	- Unjustified gradient backgrounds — especially purple-to-pink or blue-to-purple hero gradients.
81	- Left-accent cards — the 4px colored vertical bar on the left of a card is a Bootstrap-era reflex. Banned unless the file declares it.
82	- **SVG line-drawing illustr

People who liked this also viewed

6 picks

Type