* 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. |
||
|---|---|---|
| .. | ||
| airbnb | ||
| airtable | ||
| apple | ||
| binance | ||
| bmw | ||
| bugatti | ||
| cal | ||
| claude | ||
| clay | ||
| clickhouse | ||
| cohere | ||
| coinbase | ||
| composio | ||
| cursor | ||
| default | ||
| elevenlabs | ||
| expo | ||
| ferrari | ||
| figma | ||
| framer | ||
| hashicorp | ||
| ibm | ||
| intercom | ||
| kraken | ||
| lamborghini | ||
| linear-app | ||
| lovable | ||
| mastercard | ||
| meta | ||
| minimax | ||
| mintlify | ||
| miro | ||
| mistral-ai | ||
| mongodb | ||
| nike | ||
| notion | ||
| nvidia | ||
| ollama | ||
| opencode-ai | ||
| playstation | ||
| posthog | ||
| raycast | ||
| renault | ||
| replicate | ||
| resend | ||
| revolut | ||
| runwayml | ||
| sanity | ||
| sentry | ||
| shopify | ||
| spacex | ||
| spotify | ||
| starbucks | ||
| stripe | ||
| supabase | ||
| superhuman | ||
| tesla | ||
| theverge | ||
| together-ai | ||
| uber | ||
| vercel | ||
| vodafone | ||
| voltagent | ||
| warm-editorial | ||
| warp | ||
| webflow | ||
| wired | ||
| wise | ||
| x-ai | ||
| xiaohongshu | ||
| zapier | ||
| README.md | ||
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(thegetdesign@latestnpm 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.app →
linear-app, x.ai → x-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.