Cargando la bóveda…
Cargando la bóveda…
Colección open source de 55 archivos DESIGN.md con el design system extraído de páginas famosas (Apple, Stripe, Linear, Vercel, Notion). Copiás un archivo, lo pegás en tu proyecto, le decís a Claude 'diseñá como esto pero con mi marca'. Claude usa colores, fonts, espaciado, botones.
Querés que tu página se vea como Apple. Antes:
Ahora: alguien ya hizo el trabajo. Abrió Apple, sacó todos los colores, fonts, tamaños, botones, espaciado → puso todo en archivo de texto DESIGN.md.
Vos:
Repo: VoltAgent/awesome-design-md. Open source.
git clone https://github.com/VoltAgent/awesome-design-md.gitO ZIP desde GitHub.
Mirá la carpeta designs/. 55 carpetas, cada una con nombre de empresa (apple/, stripe/, linear/, etc.).
cp awesome-design-md/designs/linear/DESIGN.md ~/mi-proyecto/En tu proyecto:
> Leé DESIGN.md.
Quiero diseñar landing para [TU PRODUCTO] usando ese design
system pero con mi marca.
Mi marca:
- Color principal: [TU COLOR]
- Mi tono: [TU TONO]
- Mi audiencia: [TU TARGET]
Aplicá la estructura, espaciado, jerarquía visual del
DESIGN.md pero con mis valores.Claude diseña tu página con la estética del original pero con tu identidad.
# Linear Design System
## Colors
- Primary: #5E6AD2 (RGB: 94, 106, 210)
- Background: #1C1C24 (dark)
- Text primary: #F7F8F8
- Text secondary: #B4BBC4
- Accent: #8b5cf6 (purple)
## Typography
- Headings: Inter, font-weight 600
- Body: Inter, font-weight 400
- Mono: JetBrains Mono
- Sizes: 12px base, 1.25 scale
## Spacing
- Base unit: 4px
- Common: 8, 12, 16, 24, 32, 48, 64
- Section padding: 96px desktop, 48px mobile
## Buttons
- Border radius: 6px
- Padding: 12px 16px
- Hover: scale 0.98 + brightness change
- Primary: solid color, white text
- Secondary: transparent border
## Components
- Cards: subtle border, no shadow, hover state
- Inputs: minimal border, focus highlight
- Navigation: top bar with subtle blur backdropEs destilación del design system del original.
55 cubre prácticamente cualquier estética que necesités.
> Leé designs/linear/DESIGN.md.
> Mi producto: SaaS de gestión de inventario para retail.
> Mi color: verde #2DA44E (en lugar del violet de Linear).
> Mantené spacing, tipo, jerarquía, componentes de Linear.
> Cambiá colores específicos a mi paleta.> Leé designs/apple/DESIGN.md.
> Quiero pitch deck (Keynote o PPTX) con esa estética.
> 10 slides, mi info de empresa: [pegás].> Leé designs/notion/DESIGN.md.
> Construime app mobile (Next.js + Tailwind, responsive a
mobile-first) con esa estética.
> Feature principal: tomar notas con bullets, headers, code blocks.> Leé designs/stripe/DESIGN.md y designs/linear/DESIGN.md.
> Quiero estética híbrida: spacing + jerarquía de Stripe,
paleta + sutil dark de Linear.> Leé designs/stripe/DESIGN.md.
> Auditá MI landing actual: [URL].
> Decime qué le falta para tener esa calidad de diseño.
> Prioridad: high-impact changes primero.Awesome Design MD te da el lenguaje del design system. No copia la página — copia la gramática visual. Vos llenás con tu contenido + tu identidad.
Si tu landing termina siendo Linear con otro nombre, no diferenciás. Usá el design system como base, agregá tu twist.
3 sistemas mezclados = caos. Pickeá 1-2 dominantes + acentos del tercero quizás.
Si vendés productos para abuelas y querés estética cyberpunk — choca con audiencia. Que matchee.
Es lenguaje, no copia exacta. Esperá 80-90% del feel del original, no 100%.
Primera generación rara vez es perfecta. Iterá con feedback específico.
Replica diseños + DESIGN.md = doble fuente del estilo. Replica trae layout, DESIGN.md trae detalles fine-grained.
> Usá DESIGN.md/linear como guía visual.
> Implementá con componentes de [Cult UI](/boveda/cult-ui)
para que las piezas sean premium-grade.The Architect genera blueprint funcional. DESIGN.md agrega identidad visual al blueprint.