Run any Skill in Manus with one click

awesome-design-md

Stars4

Forks0

UpdatedJuly 10, 2026 at 22:07

Reference library of 74 real-world brand design systems as DESIGN.md files (colors, typography, spacing, components, motion). Use when the user wants to match, borrow from, or take inspiration from a specific brand's visual language — "make it look like Linear/Vercel/Stripe/Apple", "give me a Notion-style dashboard", "use a Supabase-like dark theme" — or asks for a curated design token set to seed a new project. Pulls one brand's DESIGN.md as ground-truth reference for building visually consistent UI.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

Gekkos-tech

Gekkos-tech/agency-os

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

File Explorer

100 files

SKILL.md

readonly

name

awesome-design-md

description

Awesome DESIGN.md — brand design-system reference library

A curated collection of DESIGN.md files, each a deep analysis of one real brand's visual language: color tokens, typography scale, spacing, surfaces, component patterns, and motion. Source: VoltAgent/awesome-design-md.

How to use

Pick the brand closest to the target aesthetic from the index below.
Read its DESIGN.md (and README.md if present) from reference design-md/<brand>/DESIGN.md in this skill folder.
Treat that file as the ground-truth design spec — apply its tokens (colors, type, spacing, radii, shadows, motion) to the user's project. Adapt, don't copy verbatim: respect the user's existing brand and content.

For a new project, a brand's DESIGN.md can be copied into the repo root as a starting DESIGN.md and refined (this pairs well with the impeccable and taste skills).

Available brands (74)

airbnb, airtable, apple, binance, bmw, bmw-m, bugatti, cal, claude, clay, clickhouse, cohere, coinbase, composio, cursor, dell-1996, elevenlabs, expo, ferrari, figma, framer, hashicorp, hp, ibm, intercom, kraken, lamborghini, linear.app, lovable, mastercard, meta, minimax, mintlify, miro, mistral.ai, mongodb, nike, nintendo-2001, notion, nvidia, ollama, opencode.ai, pinterest, playstation, posthog, raycast, renault, replicate, resend, revolut, runwayml, sanity, sentry, shopify, slack, spacex, spotify, starbucks, stripe, supabase, superhuman, tesla, theverge, together.ai, uber, vercel, vodafone, voltagent, warp, webflow, wired, wise, x.ai, zapier

Files live in design-md/<brand>/DESIGN.md.

More from this repository

same repository

agency-workflow

Gekkos-tech/agency-os

The agency project router — orchestrates the full client-project lifecycle BRIEF → CONCEPT → DESIGN → BUILD → QA → LAUNCH plus the post-launch MAINTAIN loop, and tells Claude which specialist skill to load at each phase. Use this skill whenever a client web project starts or advances — trigger on "new project", "neues Projekt", "website for a client", "Website für Kunde/Kunden", "Kundenprojekt starten", "start a client project", "we won a pitch", "relaunch for", "where does the project stand", "wo steht das Projekt", or any request to plan, kick off, continue, or maintain a client website, landing page, or web app — even if the user only describes the client and goal ("a website for a café in Cologne"). This skill routes, enforces phase gates, and keeps docs/project-state.md current; the actual design/build/QA work happens in the specialist skills it delegates to.

2026-07-124

cms-integration

Gekkos-tech/agency-os

Choose and integrate the right CMS for a client website — decision tree (client editing needs, budget, hosting, stack) plus integration patterns for Payload, Sanity, Storyblok, Strapi, Decap, and headless WordPress, and a client-handover checklist. Use when the user asks "which CMS", "add a CMS", "the client wants to edit content themselves", "Kunde soll Inhalte selbst pflegen", "WordPress or something modern", "headless CMS", or when the BUILD phase reveals editable content requirements. Covers selection, modeling content from the design handoff, preview setup, and editor training. NOT for building the site's frontend (BUILD phase skills), NOT for content strategy or SEO content (seo-content), NOT for one-off static sites where nothing needs client editing — recommending "no CMS" is a valid outcome of this skill.

2026-07-124

impeccable

Gekkos-tech/agency-os

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks; GSAP/scroll animation implementation belongs to gsap-suite (motion-3d).

2026-07-124

ad-concepts

Gekkos-tech/agency-os

Generates advertising campaign concepts and creative routes. Use when the user asks for a "campaign for" / "Kampagne für" a product, "ad ideas", "campaign ideation", "creative concepts for ads", "hook ideas", or wants creative directions before production. Always delivers exactly 3 distinct campaign routes (working title, core claim, hook, visual idea, primary channel, persuasion framework) built on an audience-insight step and a framework toolbox (AIDA, PAS, JTBD, 4U, hook formulas). NOT for writing finished ad copy or headlines (use ad-copy), NOT for platform format specs or asset dimensions (use social-formats), NOT for landing page structure (use landingpage-cro).

2026-07-104

ad-copy

Gekkos-tech/agency-os

Writes performance ad and landing page copy in German and English. Use when the user asks for "ad copy", "Werbetext", "headlines for", "CTA ideas", "A/B variants", "copy for the campaign", or needs finished text for Meta/Google/LinkedIn ads, landing pages, or banners. Provides headline systems (benefit, curiosity, social-proof, urgency), a funnel-stage CTA library (DE+EN), an A/B/C variant protocol with per-variant hypotheses, a tonality matrix, German-specific rules (Du/Sie, compound words, character lengths), and compliance guardrails. NOT for campaign ideation or creative routes (use ad-concepts), NOT for long-form content strategy, blog posts, or SEO articles (use seo-content skills).

2026-07-104

landingpage-cro

Gekkos-tech/agency-os

Structures and audits landing pages for conversion — the bridge between design, SEO, and copy. Use when the user asks about "landing page structure", "CRO", "conversion optimization", "why isn't the page converting", "landingpage aufbauen", or needs a section-by-section page architecture, friction audit, message-match check, or A/B testing plan. Covers the conversion narrative sequence (hero → credibility → problem/solution → offer → proof → objections → risk reversal → CTA), DACH trust elements, mobile-first conversion rules, and a measurement plan. NOT for visual design systems, typography, or component styling (use design-foundation skills), NOT for SEO audits, rankings, or keyword research (use seo-marketing skills), NOT for writing the copy itself (use ad-copy).

2026-07-104

name

awesome-design-md

description

Awesome DESIGN.md — brand design-system reference library

How to use

Pick the brand closest to the target aesthetic from the index below.
Read its DESIGN.md (and README.md if present) from reference design-md/<brand>/DESIGN.md in this skill folder.
Treat that file as the ground-truth design spec — apply its tokens (colors, type, spacing, radii, shadows, motion) to the user's project. Adapt, don't copy verbatim: respect the user's existing brand and content.

For a new project, a brand's DESIGN.md can be copied into the repo root as a starting DESIGN.md and refined (this pairs well with the impeccable and taste skills).

Available brands (74)

Files live in design-md/<brand>/DESIGN.md.