open-design/design-systems
Lin c0ba960bef
docs(xiaohongshu): address review feedback from #24 (#54)
* docs(xiaohongshu): address review feedback from #24

Ten review notes from #24, eight applied in this file, one tracked in PR
body, one explicitly deferred per reviewer guidance.

- §2: clarify the brand-red split — the +6 red-channel shift between
  #FF2442 (token) and #FF2E4D (component layer) is documented as
  intent-undocumented-upstream rather than left implicit.
- §2: add a heads-up that danger reuses --primary, so destructive
  actions and primary CTAs are visually identical out of the box;
  recommend outline + brand-red text or a leading destructive icon as
  a defensive default.
- §2: state dark-mode trigger explicitly (prefers-color-scheme + manual
  override; both :root[dark] and .force-dark honored).
- §5: explain *why* the masonry uses translate3d + ResizeObserver
  rather than CSS Masonry — the latter is still flagged in most
  browsers as of 2026.
- §6: add a dark-mode row to the elevation table; alpha-on-black
  shadows are invisible on the #19191E canvas, so drop hover shadows
  and replace modal shadow with a 1px hairline at rgba(255,255,255,.07).
- §7: forbid fabricating the 小红书 wordmark / RED logotype as artifact
  output (tokens are not protectable, the wordmark is — emit a labelled
  grey block instead).
- §7: forbid referencing RED Number standalone in generated CSS without
  the PingFang fallback chain.
- §7: add a concrete shadow threshold to the heavy-shadows Don't —
  alpha > 0.15 or spread > 16px is the cutoff.
- §9: new "Brand Red Disambiguation" subsection at the top of the Agent
  Prompt Guide making the per-surface rule explicit (default: #FF2442;
  pixel-replica only: #FF2E4D; never mix on one component).

Schema-drift between CONTRIBUTING.md and the bundled design-system
corpus is intentionally not addressed here — the reviewer flagged it as
a wider-scope cleanup affecting all ~70 systems and explicitly said
"no action requested in this PR" if treated as such.

* docs(xiaohongshu): correct channel-delta in brand-red rationale

Codex review bot caught a numerical error in #54: #FF2442 → #FF2E4D
is not "+6 on the red channel" — both colors share the same red
channel (FF = 255). The actual delta is +10 on green (24 → 2E) and
+11 on blue (42 → 4D), which together raise lightness slightly and
shift the hue a touch toward pink.

Document review badge: P2.
2026-05-01 10:38:19 +08:00
..
airbnb Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
airtable Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
apple Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
binance Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
bmw Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
bugatti Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
cal Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
claude Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
clay Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
clickhouse Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
cohere Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
coinbase Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
composio Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
cursor Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
default Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
elevenlabs Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
expo Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
ferrari Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
figma Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
framer Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
hashicorp Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
ibm Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
intercom Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
kraken Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
lamborghini Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
linear-app Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
lovable Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
mastercard Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
meta Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
minimax Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
mintlify Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
miro Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
mistral-ai Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
mongodb Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
nike Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
notion Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
nvidia Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
ollama Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
opencode-ai Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
pinterest Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
playstation Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
posthog Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
raycast Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
renault Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
replicate Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
resend Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
revolut Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
runwayml Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
sanity Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
sentry Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
shopify Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
spacex Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
spotify Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
starbucks Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
stripe Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
supabase Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
superhuman Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
tesla Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
theverge Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
together-ai Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
uber Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
vercel Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
vodafone Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
voltagent Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
warm-editorial Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
warp Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
webflow Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
wired Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
wise Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
x-ai Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
xiaohongshu docs(xiaohongshu): address review feedback from #24 (#54) 2026-05-01 10:38:19 +08:00
zapier Add initial project structure with essential files 2026-04-28 12:25:59 +08:00
README.md Refresh desktop integration control plane (#123) 2026-04-30 14:23:53 +08:00

Design Systems

Each subfolder is a portable design system in DESIGN.md format. Pick one in the top-bar Design system dropdown and every skill will read it as part of its system prompt.

What's bundled

  • default/ — Neutral Modern. Hand-authored starter for the OD spec.
  • warm-editorial/ — Warm Editorial. Hand-authored serif starter.
  • 69 product systems, imported from VoltAgent/awesome-design-md (the getdesign@latest npm package, MIT-licensed). One folder per brand:
    Category Systems
    AI & LLM claude · cohere · elevenlabs · minimax · mistral-ai · ollama · opencode-ai · replicate · runwayml · together-ai · voltagent · x-ai
    Developer Tools cursor · expo · lovable · raycast · superhuman · vercel · warp
    Productivity & SaaS cal · intercom · linear-app · mintlify · notion · resend · zapier
    Backend & Data clickhouse · composio · hashicorp · mongodb · posthog · sanity · sentry · supabase
    Design & Creative airtable · clay · figma · framer · miro · webflow
    Fintech & Crypto binance · coinbase · kraken · mastercard · revolut · stripe · wise
    E-Commerce & Retail airbnb · meta · nike · shopify · starbucks
    Media & Consumer apple · ibm · nvidia · pinterest · playstation · spacex · spotify · theverge · uber · vodafone · wired
    Automotive bmw · bugatti · ferrari · lamborghini · renault · tesla

Folders use ASCII slugs — dotted brands are normalized (linear.applinear-app, x.aix-ai, etc.).

File shape

The first H1 is the title shown in the picker. The line immediately after the H1 is parsed for > Category: <name> and used to group the dropdown:

# Design System Inspired by Cohere

> Category: AI & LLM
> Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic.

## 1. Visual Theme & Atmosphere
...

Both the boilerplate prefix Design System Inspired by and the > Category: ... line are stripped from the dropdown label and the summary preview at runtime — they're only metadata.

Adding your own

Drop a new folder containing a DESIGN.md and it shows up on next refresh. Add a > Category: <Group> line to slot it under an existing group, or use any new label and it lands at the bottom of the dropdown.

Refreshing the bundled set

The 69 product systems are pulled from the upstream npm package. To re-sync to the latest hashes:

curl -sL $(npm view getdesign dist.tarball) -o /tmp/getdesign.tgz
tar -xzf /tmp/getdesign.tgz -C /tmp
node --experimental-strip-types scripts/sync-design-systems.ts

For now, the original importer lives at the top of the excessive-climb branch — re-run it against a fresh tarball.

Attribution

The 69 product systems are sourced from VoltAgent/awesome-design-md (MIT, © VoltAgent contributors). They are aesthetic inspirations — none of them are official assets of the brands they reference.