{ "version": 1, "generatedAt": "2026-10-30T06:10:55.969Z", "site": "https://feimacode.github.io/open-design-agent-kit/", "repository": "https://github.com/feimacode/open-design-agent-kit", "hubs": { "designSystems": { "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/", "tags": [ "ai", "artistic", "automotive", "bold", "brand", "calm", "commerce", "consumer", "corporate", "creative", "dashboard", "dating", "developer", "editorial", "education", "elegant", "enterprise", "finance", "food", "friendly", "futuristic", "gaming", "media", "minimal", "playful", "premium", "retro", "romantic", "saas", "social", "technical", "travel", "warm", "wellness" ] }, "examples": { "url": "https://feimacode.github.io/open-design-agent-kit/examples/", "tags": [ "3d", "academic research", "ai literacy", "article", "article sketchnote editorial", "audio", "b2b sales", "brand page", "card", "career", "competitive teardown", "consulting", "corporate strategy", "data", "data finance", "deck", "design craft", "design-system", "diagram", "doc", "email", "exec briefing memo", "experiment readout", "fundraising pitch", "government policy", "image", "info funnel", "life", "marketing gtm", "other", "page", "poster", "product management", "professional training", "resume", "student coursework", "template", "video" ] }, "filter": "Append #tag=, #q= or both (#tag=poster&q=cafe) to a hub URL to open it filtered." }, "designSystems": [ { "id": "agentic", "title": "Agentic", "summary": "Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.", "tags": [ "minimal", "calm", "technical", "ai", "saas" ], "colors": [ "#0b1020", "#f8fafc", "#60a5fa", "#131b2f", "#8ea0b8" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/agentic/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/agentic/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/agentic.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/agentic/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/agentic/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/agentic/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/agentic/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/agentic/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/agentic/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/agentic" }, "prompts": { "kit": "Use the Open Design design system \"agentic\" for my designs.", "claudeDesign": "Add the \"Agentic\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/agentic/project. Build a Design System artifact from them." } }, { "id": "airbnb", "title": "Airbnb", "summary": "Travel marketplace. Warm coral accent, photography-driven, rounded UI.", "tags": [ "warm", "friendly", "travel", "commerce" ], "colors": [ "#ffffff", "#222222", "#ff385c", "#6a6a6a" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/airbnb/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/airbnb/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/airbnb.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/airbnb/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/airbnb/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/airbnb/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/airbnb/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/airbnb/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/airbnb/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/airbnb" }, "prompts": { "kit": "Use the Open Design design system \"airbnb\" for my designs.", "claudeDesign": "Add the \"Airbnb\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/airbnb/project. Build a Design System artifact from them." } }, { "id": "airtable", "title": "Airtable", "summary": "Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic.", "tags": [ "friendly", "playful", "saas", "dashboard" ], "colors": [ "#ffffff", "#181d26", "#1b61c9", "rgba(4, 14, 32, 0.69)" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/airtable/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/airtable/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/airtable.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/airtable/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/airtable/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/airtable/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/airtable/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/airtable/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/airtable/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/airtable" }, "prompts": { "kit": "Use the Open Design design system \"airtable\" for my designs.", "claudeDesign": "Add the \"Airtable\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/airtable/project. Build a Design System artifact from them." } }, { "id": "ant", "title": "Ant", "summary": "Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.", "tags": [ "corporate", "technical", "enterprise", "dashboard" ], "colors": [ "#ffffff", "#1f1f1f", "#d32029", "#f7f8fa", "#697386" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/ant/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/ant/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/ant.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/ant/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/ant/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/ant/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/ant/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/ant/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/ant/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/ant" }, "prompts": { "kit": "Use the Open Design design system \"ant\" for my designs.", "claudeDesign": "Add the \"Ant\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/ant/project. Build a Design System artifact from them." } }, { "id": "apple", "title": "Apple", "summary": "Consumer electronics. Premium white space, SF Pro, cinematic imagery.", "tags": [ "premium", "minimal", "elegant", "consumer", "commerce" ], "colors": [ "#ffffff", "#1d1d1f", "#0071e3", "#f5f5f7", "#6e6e73" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/apple/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/apple/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/apple.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/apple/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/apple/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/apple/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/apple/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/apple/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/apple/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/apple" }, "prompts": { "kit": "Use the Open Design design system \"apple\" for my designs.", "claudeDesign": "Add the \"Apple\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/apple/project. Build a Design System artifact from them." } }, { "id": "apple-music-ios", "title": "Apple Music (iOS)", "summary": "Music + lyrics. Apple Music Red #FA2D48, SF Pro native, time-synced word-by-word lyrics, Dolby Atmos badge, .regularMaterial tab bar", "tags": [ "bold", "premium", "media", "consumer" ], "colors": [ "#FFFFFF", "#000000", "#FA2D48", "#F2F2F7", "#8A8A8E" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/apple-music-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/apple-music-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/apple-music-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/apple-music-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/apple-music-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/apple-music-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/apple-music-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/apple-music-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/apple-music-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/apple-music-ios" }, "prompts": { "kit": "Use the Open Design design system \"apple-music-ios\" for my designs.", "claudeDesign": "Add the \"Apple Music (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/apple-music-ios/project. Build a Design System artifact from them." } }, { "id": "application", "title": "Application", "summary": "App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.", "tags": [ "technical", "friendly", "saas", "developer" ], "colors": [ "#f6f7f9", "#09090b", "#9333ea", "#ffffff", "#6b7689" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/application/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/application/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/application.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/application/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/application/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/application/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/application/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/application/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/application/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/application" }, "prompts": { "kit": "Use the Open Design design system \"application\" for my designs.", "claudeDesign": "Add the \"Application\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/application/project. Build a Design System artifact from them." } }, { "id": "arc", "title": "Arc Browser", "summary": "\"The browser that browses for you.\" Translucent surfaces, gradient warmth, sidebar-first layout.", "tags": [ "warm", "playful", "futuristic", "saas", "consumer" ], "colors": [ "#fdf3ec", "#1a1a1f", "#ff5f5f", "#ffffff", "#8c8c93" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/arc/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/arc/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/arc.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/arc/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/arc/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/arc/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/arc/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/arc/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/arc/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/arc" }, "prompts": { "kit": "Use the Open Design design system \"arc\" for my designs.", "claudeDesign": "Add the \"Arc Browser\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/arc/project. Build a Design System artifact from them." } }, { "id": "artistic", "title": "Artistic", "summary": "High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.", "tags": [ "bold", "artistic", "creative", "brand" ], "colors": [ "#fbf6ee", "#201914", "#9b5b32", "#fffdf8", "#7a6d63" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/artistic/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/artistic/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/artistic.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/artistic/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/artistic/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/artistic/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/artistic/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/artistic/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/artistic/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/artistic" }, "prompts": { "kit": "Use the Open Design design system \"artistic\" for my designs.", "claudeDesign": "Add the \"Artistic\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/artistic/project. Build a Design System artifact from them." } }, { "id": "atelier-zero", "title": "Atelier Zero", "summary": "A magazine-grade, collage-driven visual system: warm paper canvas, surreal plaster-and-architecture imagery, oversized display type, hairline rules, Roman-numeral section markers, and tiny editorial annotations. Inspire…", "tags": [ "editorial", "artistic", "warm", "creative" ], "colors": [ "#ffffff", "#111111", "#f7f7f7", "#707070" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/atelier-zero/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/atelier-zero/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/atelier-zero.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/atelier-zero/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/atelier-zero/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/atelier-zero/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/atelier-zero/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/atelier-zero/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/atelier-zero/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/atelier-zero" }, "prompts": { "kit": "Use the Open Design design system \"atelier-zero\" for my designs.", "claudeDesign": "Add the \"Atelier Zero\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/atelier-zero/project. Build a Design System artifact from them." } }, { "id": "basic", "title": "Basic", "summary": "A print-inspired editorial system: bright paper canvas, condensed expressive display type, and a single blue-violet accent.", "tags": [ "editorial", "bold", "media" ], "colors": [ "#f7f6f2", "#0a1829", "#4f5fea", "#ffffff", "#5b6472" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/basic/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/basic/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/basic.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/basic/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/basic/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/basic/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/basic/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/basic/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/basic/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/basic" }, "prompts": { "kit": "Use the Open Design design system \"basic\" for my designs.", "claudeDesign": "Add the \"Basic\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/basic/project. Build a Design System artifact from them." } }, { "id": "bento", "title": "Bento", "summary": "Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.", "tags": [ "minimal", "friendly", "saas", "brand" ], "colors": [ "#f5f8ff", "#111827", "#fad4c0", "#fff5e6", "#667085" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/bento/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/bento/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/bento.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/bento/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/bento/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/bento/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/bento/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/bento/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/bento/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/bento" }, "prompts": { "kit": "Use the Open Design design system \"bento\" for my designs.", "claudeDesign": "Add the \"Bento\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/bento/project. Build a Design System artifact from them." } }, { "id": "binance", "title": "Binance.US", "summary": "Crypto exchange. Bold yellow accent on monochrome, trading-floor urgency.", "tags": [ "bold", "technical", "finance" ], "colors": [ "#ffffff", "#1e2026", "#f0b90b", "#848e9c" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/binance/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/binance/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/binance.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/binance/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/binance/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/binance/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/binance/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/binance/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/binance/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/binance" }, "prompts": { "kit": "Use the Open Design design system \"binance\" for my designs.", "claudeDesign": "Add the \"Binance.US\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/binance/project. Build a Design System artifact from them." } }, { "id": "bluesky-ios", "title": "Bluesky (iOS)", "summary": "Custom-feeds social. Bluesky Blue #1185FE, butterfly mark, switchable pinned custom feeds, reply-control chips, three themes (light / dim #1E2936 / dark #0B0F1…", "tags": [ "friendly", "minimal", "social" ], "colors": [ "#FFFFFF", "#0B0F14", "#1185FE", "#F1F3F5", "#697787" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/bluesky-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/bluesky-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/bluesky-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/bluesky-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/bluesky-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/bluesky-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/bluesky-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/bluesky-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/bluesky-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/bluesky-ios" }, "prompts": { "kit": "Use the Open Design design system \"bluesky-ios\" for my designs.", "claudeDesign": "Add the \"Bluesky (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/bluesky-ios/project. Build a Design System artifact from them." } }, { "id": "bmw", "title": "BMW", "summary": "Luxury automotive. Dark premium surfaces, precise German engineering aesthetic.", "tags": [ "premium", "technical", "automotive" ], "colors": [ "#ffffff", "#262626", "#1c69d4", "#f5f5f5", "#757575" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/bmw/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/bmw/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/bmw.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/bmw/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/bmw/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/bmw/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/bmw/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/bmw/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/bmw/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/bmw" }, "prompts": { "kit": "Use the Open Design design system \"bmw\" for my designs.", "claudeDesign": "Add the \"BMW\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/bmw/project. Build a Design System artifact from them." } }, { "id": "bmw-m", "title": "BMW M", "summary": "Motorsport performance sub-brand. Near-black cockpit surfaces, BMW M tricolor accents, sharp engineering geometry.", "tags": [ "bold", "premium", "technical", "automotive" ], "colors": [ "#f7f8fa", "#111827", "#0066b1", "#ffffff", "#64748b" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/bmw-m/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/bmw-m/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/bmw-m.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/bmw-m/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/bmw-m/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/bmw-m/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/bmw-m/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/bmw-m/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/bmw-m/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/bmw-m" }, "prompts": { "kit": "Use the Open Design design system \"bmw-m\" for my designs.", "claudeDesign": "Add the \"BMW M\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/bmw-m/project. Build a Design System artifact from them." } }, { "id": "bold", "title": "Bold", "summary": "Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.", "tags": [ "bold", "brand", "commerce" ], "colors": [ "#ffffff", "#111111", "#f7f7f7", "#707070" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/bold/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/bold/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/bold.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/bold/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/bold/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/bold/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/bold/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/bold/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/bold/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/bold" }, "prompts": { "kit": "Use the Open Design design system \"bold\" for my designs.", "claudeDesign": "Add the \"Bold\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/bold/project. Build a Design System artifact from them." } }, { "id": "booking-ios", "title": "Booking.com (iOS)", "summary": "Travel booking. Booking navy #003580 + bright-blue #0071C2 action + yellow #FEBB02, the review-score badge, dense property cards, Genius banner", "tags": [ "technical", "friendly", "travel" ], "colors": [ "#FFFFFF", "#1A1A1A", "#0071C2", "#F2F2F2", "#6B6B6B" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/booking-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/booking-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/booking-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/booking-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/booking-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/booking-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/booking-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/booking-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/booking-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/booking-ios" }, "prompts": { "kit": "Use the Open Design design system \"booking-ios\" for my designs.", "claudeDesign": "Add the \"Booking.com (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/booking-ios/project. Build a Design System artifact from them." } }, { "id": "brutalism", "title": "Brutalism", "summary": "Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.", "tags": [ "bold", "artistic", "creative", "brand" ], "colors": [ "#f5f1e8", "#000000", "#ffef5a", "#ffffff", "#555555" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/brutalism/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/brutalism/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/brutalism.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/brutalism/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/brutalism/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/brutalism/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/brutalism/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/brutalism/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/brutalism/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/brutalism" }, "prompts": { "kit": "Use the Open Design design system \"brutalism\" for my designs.", "claudeDesign": "Add the \"Brutalism\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/brutalism/project. Build a Design System artifact from them." } }, { "id": "bugatti", "title": "Bugatti", "summary": "Hypercar brand. Cinema-black canvas, monochrome austerity, monumental display type.", "tags": [ "premium", "elegant", "bold", "automotive" ], "colors": [ "#07111f", "#f7fbff", "#1b4d8f", "#101d2f", "#8fa1b7" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/bugatti/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/bugatti/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/bugatti.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/bugatti/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/bugatti/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/bugatti/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/bugatti/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/bugatti/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/bugatti/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/bugatti" }, "prompts": { "kit": "Use the Open Design design system \"bugatti\" for my designs.", "claudeDesign": "Add the \"Bugatti\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/bugatti/project. Build a Design System artifact from them." } }, { "id": "bumble-ios", "title": "Bumble (iOS)", "summary": "Women-first dating. Bumble Yellow #FFC629 + pure-black-on-yellow text, hexagon iconography for matches and mode toggles, big confident Brando 500/700/900, 24-h…", "tags": [ "bold", "friendly", "playful", "dating", "social" ], "colors": [ "#FFFFFF", "#1F1F1F", "#FFC629", "#F5F5F5", "#5A5A5A" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/bumble-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/bumble-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/bumble-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/bumble-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/bumble-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/bumble-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/bumble-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/bumble-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/bumble-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/bumble-ios" }, "prompts": { "kit": "Use the Open Design design system \"bumble-ios\" for my designs.", "claudeDesign": "Add the \"Bumble (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/bumble-ios/project. Build a Design System artifact from them." } }, { "id": "cafe", "title": "Cafe", "summary": "Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.", "tags": [ "warm", "calm", "friendly", "food", "consumer" ], "colors": [ "#fbf6ee", "#201914", "#9b5b32", "#fffdf8", "#7a6d63" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/cafe/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/cafe/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/cafe.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/cafe/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/cafe/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/cafe/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/cafe/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/cafe/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/cafe/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/cafe" }, "prompts": { "kit": "Use the Open Design design system \"cafe\" for my designs.", "claudeDesign": "Add the \"Cafe\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/cafe/project. Build a Design System artifact from them." } }, { "id": "cal", "title": "Cal.com", "summary": "Open-source scheduling. Clean neutral UI, developer-oriented simplicity.", "tags": [ "minimal", "technical", "saas", "developer" ], "colors": [ "#ffffff", "#242424", "#0099ff", "#898989" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/cal/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/cal/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/cal.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/cal/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/cal/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/cal/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/cal/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/cal/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/cal/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/cal" }, "prompts": { "kit": "Use the Open Design design system \"cal\" for my designs.", "claudeDesign": "Add the \"Cal.com\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/cal/project. Build a Design System artifact from them." } }, { "id": "canva", "title": "Canva", "summary": "Visual creation platform. Vivid purple-blue gradient, generous spacing, friendly geometry.", "tags": [ "friendly", "playful", "creative", "saas" ], "colors": [ "#ffffff", "#0e1318", "#7d2ae8", "#f4f5f7", "#5f6368" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/canva/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/canva/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/canva.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/canva/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/canva/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/canva/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/canva/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/canva/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/canva/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/canva" }, "prompts": { "kit": "Use the Open Design design system \"canva\" for my designs.", "claudeDesign": "Add the \"Canva\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/canva/project. Build a Design System artifact from them." } }, { "id": "cash-app-ios", "title": "Cash App (iOS)", "summary": "Mobile money. Pure-black canvas + single Cash Green #00D632 accent, Cash Sans / Cash Sans Mono, 96pt $-amount keypad, icon-only tab bar, matte black Cash Card", "tags": [ "bold", "minimal", "finance" ], "colors": [ "#000000", "#FFFFFF", "#00D632", "#0F0F0F", "#9E9E9E" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/cash-app-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/cash-app-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/cash-app-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/cash-app-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/cash-app-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/cash-app-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/cash-app-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/cash-app-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/cash-app-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/cash-app-ios" }, "prompts": { "kit": "Use the Open Design design system \"cash-app-ios\" for my designs.", "claudeDesign": "Add the \"Cash App (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/cash-app-ios/project. Build a Design System artifact from them." } }, { "id": "cisco", "title": "Cisco", "summary": "Enterprise infrastructure brand. Dark trust surfaces, Cisco Blue signal, technical clarity.", "tags": [ "corporate", "technical", "enterprise" ], "colors": [ "#0f1720", "#ffffff", "#049fd9", "#1b2530", "#9e9ea2" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/cisco/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/cisco/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/cisco.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/cisco/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/cisco/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/cisco/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/cisco/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/cisco/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/cisco/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/cisco" }, "prompts": { "kit": "Use the Open Design design system \"cisco\" for my designs.", "claudeDesign": "Add the \"Cisco\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/cisco/project. Build a Design System artifact from them." } }, { "id": "claude", "title": "Claude (Anthropic)", "summary": "Anthropic's AI assistant. Warm terracotta accent, clean editorial layout.", "tags": [ "warm", "calm", "editorial", "ai" ], "colors": [ "#f5f4ed", "#141413", "#c96442", "#faf9f5", "#5e5d59" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/claude/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/claude/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/claude.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/claude/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/claude/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/claude/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/claude/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/claude/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/claude/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/claude" }, "prompts": { "kit": "Use the Open Design design system \"claude\" for my designs.", "claudeDesign": "Add the \"Claude (Anthropic)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/claude/project. Build a Design System artifact from them." } }, { "id": "clay", "title": "Clay", "summary": "Creative agency. Organic shapes, soft gradients, art-directed layout.", "tags": [ "artistic", "warm", "playful", "creative", "brand" ], "colors": [ "#f7eee6", "#2b211c", "#b46a46", "#fff8f1", "#8a7a70" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/clay/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/clay/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/clay.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/clay/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/clay/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/clay/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/clay/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/clay/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/clay/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/clay" }, "prompts": { "kit": "Use the Open Design design system \"clay\" for my designs.", "claudeDesign": "Add the \"Clay\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/clay/project. Build a Design System artifact from them." } }, { "id": "claymorphism", "title": "Claymorphism", "summary": "Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.", "tags": [ "playful", "friendly", "consumer", "education" ], "colors": [ "#f7eee6", "#2b211c", "#b46a46", "#fff8f1", "#8a7a70" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/claymorphism/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/claymorphism/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/claymorphism.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/claymorphism/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/claymorphism/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/claymorphism/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/claymorphism/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/claymorphism/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/claymorphism/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/claymorphism" }, "prompts": { "kit": "Use the Open Design design system \"claymorphism\" for my designs.", "claudeDesign": "Add the \"Claymorphism\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/claymorphism/project. Build a Design System artifact from them." } }, { "id": "clean", "title": "Clean", "summary": "Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.", "tags": [ "minimal", "calm", "saas", "consumer" ], "colors": [ "#ffffff", "#111111", "#f7f7f7", "#707070" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/clean/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/clean/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/clean.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/clean/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/clean/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/clean/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/clean/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/clean/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/clean/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/clean" }, "prompts": { "kit": "Use the Open Design design system \"clean\" for my designs.", "claudeDesign": "Add the \"Clean\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/clean/project. Build a Design System artifact from them." } }, { "id": "clickhouse", "title": "ClickHouse", "summary": "Fast analytics database. Yellow-accented, technical documentation style.", "tags": [ "technical", "developer" ], "colors": [ "#000000", "#ffffff", "#faff69", "#141414", "#a0a0a0" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/clickhouse/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/clickhouse/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/clickhouse.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/clickhouse/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/clickhouse/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/clickhouse/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/clickhouse/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/clickhouse/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/clickhouse/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/clickhouse" }, "prompts": { "kit": "Use the Open Design design system \"clickhouse\" for my designs.", "claudeDesign": "Add the \"ClickHouse\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/clickhouse/project. Build a Design System artifact from them." } }, { "id": "cloudflare-kumo", "title": "Cloudflare Kumo UI", "summary": "Cloudflare's component system for modern web apps, with semantic light and dark tokens, compact typography, layered neutral surfaces, accessible controls, and …", "tags": [ "technical", "minimal", "developer", "saas" ], "colors": [ "oklch(98.75% 0 0)", "oklch(21% 0.006 285.885)", "oklch(0.5772 0.2324 260)", "#ffffff", "oklch(55.6% 0 0)" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/cloudflare-kumo/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/cloudflare-kumo/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/cloudflare-kumo.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/cloudflare-kumo/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/cloudflare-kumo/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/cloudflare-kumo/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/cloudflare-kumo/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/cloudflare-kumo/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/cloudflare-kumo/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/cloudflare-kumo" }, "prompts": { "kit": "Use the Open Design design system \"cloudflare-kumo\" for my designs.", "claudeDesign": "Add the \"Cloudflare Kumo UI\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/cloudflare-kumo/project. Build a Design System artifact from them." } }, { "id": "codex", "title": "Codex", "summary": "A radically minimal, genuinely monochrome interface: pure white canvas, black carrying every structural and interactive signal, no second accent color.", "tags": [ "minimal", "technical", "developer", "saas" ], "colors": [ "#ffffff", "#0a0a0a", "#6b7280" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/codex/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/codex/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/codex.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/codex/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/codex/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/codex/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/codex/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/codex/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/codex/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/codex" }, "prompts": { "kit": "Use the Open Design design system \"codex\" for my designs.", "claudeDesign": "Add the \"Codex\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/codex/project. Build a Design System artifact from them." } }, { "id": "cohere", "title": "Cohere", "summary": "Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic.", "tags": [ "technical", "bold", "ai", "enterprise" ], "colors": [ "#ffffff", "#000000", "#1863dc", "#fafafa", "#93939f" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/cohere/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/cohere/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/cohere.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/cohere/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/cohere/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/cohere/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/cohere/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/cohere/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/cohere/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/cohere" }, "prompts": { "kit": "Use the Open Design design system \"cohere\" for my designs.", "claudeDesign": "Add the \"Cohere\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/cohere/project. Build a Design System artifact from them." } }, { "id": "coinbase", "title": "Coinbase", "summary": "Crypto exchange. Clean blue identity, trust-focused, institutional feel.", "tags": [ "corporate", "minimal", "finance" ], "colors": [ "#ffffff", "#0a0b0d", "#0052ff", "#eef0f3", "#5b616e" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/coinbase/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/coinbase/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/coinbase.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/coinbase/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/coinbase/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/coinbase/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/coinbase/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/coinbase/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/coinbase/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/coinbase" }, "prompts": { "kit": "Use the Open Design design system \"coinbase\" for my designs.", "claudeDesign": "Add the \"Coinbase\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/coinbase/project. Build a Design System artifact from them." } }, { "id": "colorful", "title": "Colorful", "summary": "Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.", "tags": [ "bold", "playful", "consumer", "brand" ], "colors": [ "#fff8d7", "#1d1836", "#ff6b00", "#ffffff", "#796f91" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/colorful/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/colorful/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/colorful.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/colorful/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/colorful/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/colorful/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/colorful/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/colorful/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/colorful/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/colorful" }, "prompts": { "kit": "Use the Open Design design system \"colorful\" for my designs.", "claudeDesign": "Add the \"Colorful\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/colorful/project. Build a Design System artifact from them." } }, { "id": "composio", "title": "Composio", "summary": "Tool integration platform. Modern dark with colorful integration icons.", "tags": [ "technical", "bold", "developer", "ai" ], "colors": [ "#090b14", "#f8fafc", "#6d5dfc", "#121626", "#94a3b8" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/composio/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/composio/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/composio.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/composio/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/composio/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/composio/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/composio/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/composio/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/composio/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/composio" }, "prompts": { "kit": "Use the Open Design design system \"composio\" for my designs.", "claudeDesign": "Add the \"Composio\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/composio/project. Build a Design System artifact from them." } }, { "id": "contemporary", "title": "Contemporary", "summary": "Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.", "tags": [ "minimal", "technical", "saas" ], "colors": [ "#f5f8ff", "#111827", "#c800df", "#ffffff", "#667085" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/contemporary/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/contemporary/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/contemporary.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/contemporary/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/contemporary/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/contemporary/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/contemporary/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/contemporary/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/contemporary/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/contemporary" }, "prompts": { "kit": "Use the Open Design design system \"contemporary\" for my designs.", "claudeDesign": "Add the \"Contemporary\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/contemporary/project. Build a Design System artifact from them." } }, { "id": "corporate", "title": "Corporate", "summary": "Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.", "tags": [ "corporate", "enterprise" ], "colors": [ "#f5f8ff", "#111827", "#3b82f6", "#ffffff", "#667085" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/corporate/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/corporate/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/corporate.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/corporate/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/corporate/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/corporate/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/corporate/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/corporate/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/corporate/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/corporate" }, "prompts": { "kit": "Use the Open Design design system \"corporate\" for my designs.", "claudeDesign": "Add the \"Corporate\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/corporate/project. Build a Design System artifact from them." } }, { "id": "cosmic", "title": "Cosmic", "summary": "Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.", "tags": [ "futuristic", "bold", "gaming", "brand" ], "colors": [ "#070711", "#f8f7ff", "#c084fc", "#111126", "#9d8ad4" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/cosmic/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/cosmic/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/cosmic.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/cosmic/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/cosmic/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/cosmic/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/cosmic/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/cosmic/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/cosmic/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/cosmic" }, "prompts": { "kit": "Use the Open Design design system \"cosmic\" for my designs.", "claudeDesign": "Add the \"Cosmic\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/cosmic/project. Build a Design System artifact from them." } }, { "id": "creative", "title": "Creative", "summary": "Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.", "tags": [ "playful", "artistic", "bold", "creative", "brand" ], "colors": [ "#fff8d7", "#1d1836", "#ff6b00", "#ffffff", "#796f91" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/creative/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/creative/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/creative.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/creative/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/creative/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/creative/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/creative/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/creative/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/creative/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/creative" }, "prompts": { "kit": "Use the Open Design design system \"creative\" for my designs.", "claudeDesign": "Add the \"Creative\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/creative/project. Build a Design System artifact from them." } }, { "id": "cursor", "title": "Cursor", "summary": "AI-first code editor. Sleek dark interface, gradient accents.", "tags": [ "technical", "futuristic", "developer", "ai" ], "colors": [ "#f2f1ed", "#26251e", "#f54e00", "#e6e5e0", "rgba(38, 37, 30, 0.55)" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/cursor/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/cursor/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/cursor.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/cursor/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/cursor/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/cursor/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/cursor/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/cursor/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/cursor/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/cursor" }, "prompts": { "kit": "Use the Open Design design system \"cursor\" for my designs.", "claudeDesign": "Add the \"Cursor\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/cursor/project. Build a Design System artifact from them." } }, { "id": "dashboard", "title": "Dashboard", "summary": "Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.", "tags": [ "technical", "dashboard", "saas" ], "colors": [ "#f4f7fb", "#111827", "#0ea5e9", "#ffffff", "#64748b" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/dashboard/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/dashboard/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/dashboard.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/dashboard/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/dashboard/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/dashboard/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/dashboard/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/dashboard/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/dashboard/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/dashboard" }, "prompts": { "kit": "Use the Open Design design system \"dashboard\" for my designs.", "claudeDesign": "Add the \"Dashboard\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/dashboard/project. Build a Design System artifact from them." } }, { "id": "default", "title": "Neutral Modern", "summary": "A clean, product-oriented default. Use when the brief doesn't call for a specific mood — good for B2B tools, dashboards, and utility pages.", "tags": [ "minimal", "calm", "saas", "dashboard" ], "colors": [ "#fafafa", "#111111", "#2f6feb", "#ffffff", "#6b6b6b" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/default/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/default/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/default.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/default/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/default/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/default/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/default/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/default/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/default/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/default" }, "prompts": { "kit": "Use the Open Design design system \"default\" for my designs.", "claudeDesign": "Add the \"Neutral Modern\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/default/project. Build a Design System artifact from them." } }, { "id": "discord", "title": "Discord", "summary": "Voice / chat platform. Deep blurple, dark-first surfaces, playful accent moments.", "tags": [ "playful", "bold", "social", "gaming" ], "colors": [ "#313338", "#dbdee1", "#5865f2", "#2b2d31", "#949ba4" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/discord/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/discord/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/discord.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/discord/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/discord/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/discord/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/discord/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/discord/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/discord/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/discord" }, "prompts": { "kit": "Use the Open Design design system \"discord\" for my designs.", "claudeDesign": "Add the \"Discord\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/discord/project. Build a Design System artifact from them." } }, { "id": "dithered", "title": "Dithered", "summary": "Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.", "tags": [ "retro", "artistic", "creative", "gaming" ], "colors": [ "#fff4cf", "#2a1810", "#d24b1f", "#fffaf0", "#8a6652" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/dithered/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/dithered/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/dithered.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/dithered/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/dithered/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/dithered/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/dithered/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/dithered/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/dithered/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/dithered" }, "prompts": { "kit": "Use the Open Design design system \"dithered\" for my designs.", "claudeDesign": "Add the \"Dithered\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/dithered/project. Build a Design System artifact from them." } }, { "id": "doodle", "title": "Doodle", "summary": "Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.", "tags": [ "playful", "friendly", "education", "creative" ], "colors": [ "#fff8d7", "#1d1836", "#ff6b00", "#ffffff", "#796f91" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/doodle/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/doodle/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/doodle.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/doodle/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/doodle/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/doodle/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/doodle/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/doodle/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/doodle/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/doodle" }, "prompts": { "kit": "Use the Open Design design system \"doodle\" for my designs.", "claudeDesign": "Add the \"Doodle\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/doodle/project. Build a Design System artifact from them." } }, { "id": "doordash-ios", "title": "DoorDash (iOS)", "summary": "On-demand delivery. DoorDash Red #EB1700 for every checkout, photo-first 16:10 merchant cards, floating pill CTA, TT Norms Pro bold hierarchy", "tags": [ "bold", "friendly", "food", "commerce" ], "colors": [ "#FFFFFF", "#191919", "#EB1700", "#F7F7F7", "#757575" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/doordash-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/doordash-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/doordash-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/doordash-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/doordash-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/doordash-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/doordash-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/doordash-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/doordash-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/doordash-ios" }, "prompts": { "kit": "Use the Open Design design system \"doordash-ios\" for my designs.", "claudeDesign": "Add the \"DoorDash (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/doordash-ios/project. Build a Design System artifact from them." } }, { "id": "dramatic", "title": "Dramatic", "summary": "High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.", "tags": [ "bold", "artistic", "brand", "media" ], "colors": [ "#090b12", "#f8fafc", "#60a5fa", "#121722", "#94a3b8" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/dramatic/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/dramatic/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/dramatic.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/dramatic/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/dramatic/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/dramatic/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/dramatic/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/dramatic/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/dramatic/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/dramatic" }, "prompts": { "kit": "Use the Open Design design system \"dramatic\" for my designs.", "claudeDesign": "Add the \"Dramatic\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/dramatic/project. Build a Design System artifact from them." } }, { "id": "duolingo", "title": "Duolingo", "summary": "Language-learning platform. Bright owl green, chunky shadows, gamified joy.", "tags": [ "playful", "friendly", "education", "consumer" ], "colors": [ "#ffffff", "#3c3c3c", "#58cc02", "#f7f7f7", "#777777" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/duolingo/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/duolingo/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/duolingo.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/duolingo/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/duolingo/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/duolingo/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/duolingo/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/duolingo/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/duolingo/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/duolingo" }, "prompts": { "kit": "Use the Open Design design system \"duolingo\" for my designs.", "claudeDesign": "Add the \"Duolingo\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/duolingo/project. Build a Design System artifact from them." } }, { "id": "editorial", "title": "Editorial", "summary": "Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.", "tags": [ "editorial", "elegant", "media" ], "colors": [ "#fbf7f0", "#1f1a16", "#9a5a2f", "#fffdf8", "#7d7168" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/editorial/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/editorial/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/editorial.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/editorial/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/editorial/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/editorial/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/editorial/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/editorial/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/editorial/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/editorial" }, "prompts": { "kit": "Use the Open Design design system \"editorial\" for my designs.", "claudeDesign": "Add the \"Editorial\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/editorial/project. Build a Design System artifact from them." } }, { "id": "elegant", "title": "Elegant", "summary": "Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication.", "tags": [ "elegant", "premium", "minimal", "brand", "commerce" ], "colors": [ "#fbf6ee", "#201914", "#9b5b32", "#fffdf8", "#7a6d63" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/elegant/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/elegant/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/elegant.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/elegant/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/elegant/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/elegant/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/elegant/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/elegant/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/elegant/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/elegant" }, "prompts": { "kit": "Use the Open Design design system \"elegant\" for my designs.", "claudeDesign": "Add the \"Elegant\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/elegant/project. Build a Design System artifact from them." } }, { "id": "elevenlabs", "title": "ElevenLabs", "summary": "AI voice platform. Dark cinematic UI, audio-waveform aesthetics.", "tags": [ "technical", "premium", "ai", "media" ], "colors": [ "#ffffff", "#000000", "#f5f5f5", "#777169" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/elevenlabs/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/elevenlabs/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/elevenlabs.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/elevenlabs/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/elevenlabs/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/elevenlabs/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/elevenlabs/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/elevenlabs/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/elevenlabs/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/elevenlabs" }, "prompts": { "kit": "Use the Open Design design system \"elevenlabs\" for my designs.", "claudeDesign": "Add the \"ElevenLabs\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/elevenlabs/project. Build a Design System artifact from them." } }, { "id": "energetic", "title": "Energetic", "summary": "Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.", "tags": [ "bold", "playful", "brand", "consumer" ], "colors": [ "#fff8d7", "#1d1836", "#ff6b00", "#ffffff", "#796f91" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/energetic/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/energetic/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/energetic.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/energetic/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/energetic/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/energetic/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/energetic/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/energetic/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/energetic/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/energetic" }, "prompts": { "kit": "Use the Open Design design system \"energetic\" for my designs.", "claudeDesign": "Add the \"Energetic\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/energetic/project. Build a Design System artifact from them." } }, { "id": "enterprise", "title": "Enterprise", "summary": "Clean, high-contrast enterprise design for data-driven workflows with intuitive drag-and-drop patterns and structured layouts.", "tags": [ "corporate", "technical", "enterprise", "dashboard" ], "colors": [ "#f8fafc", "#0f172a", "#1d4ed8", "#ffffff", "#64748b" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/enterprise/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/enterprise/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/enterprise.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/enterprise/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/enterprise/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/enterprise/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/enterprise/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/enterprise/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/enterprise/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/enterprise" }, "prompts": { "kit": "Use the Open Design design system \"enterprise\" for my designs.", "claudeDesign": "Add the \"Enterprise\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/enterprise/project. Build a Design System artifact from them." } }, { "id": "expo", "title": "Expo", "summary": "React Native platform. Dark theme, tight letter-spacing, code-centric.", "tags": [ "technical", "developer" ], "colors": [ "#ffffff", "#0b0d12", "#000020", "#f6f7f9", "#6b7280" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/expo/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/expo/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/expo.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/expo/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/expo/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/expo/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/expo/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/expo/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/expo/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/expo" }, "prompts": { "kit": "Use the Open Design design system \"expo\" for my designs.", "claudeDesign": "Add the \"Expo\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/expo/project. Build a Design System artifact from them." } }, { "id": "expressive", "title": "Expressive", "summary": "Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.", "tags": [ "bold", "playful", "artistic", "brand", "creative" ], "colors": [ "#fbf8ff", "#1f1730", "#7c3aed", "#ffffff", "#776b88" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/expressive/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/expressive/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/expressive.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/expressive/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/expressive/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/expressive/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/expressive/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/expressive/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/expressive/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/expressive" }, "prompts": { "kit": "Use the Open Design design system \"expressive\" for my designs.", "claudeDesign": "Add the \"Expressive\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/expressive/project. Build a Design System artifact from them." } }, { "id": "fantasy", "title": "Fantasy", "summary": "Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.", "tags": [ "bold", "artistic", "gaming" ], "colors": [ "#070711", "#f8f7ff", "#c084fc", "#111126", "#9d8ad4" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/fantasy/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/fantasy/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/fantasy.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/fantasy/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/fantasy/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/fantasy/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/fantasy/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/fantasy/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/fantasy/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/fantasy" }, "prompts": { "kit": "Use the Open Design design system \"fantasy\" for my designs.", "claudeDesign": "Add the \"Fantasy\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/fantasy/project. Build a Design System artifact from them." } }, { "id": "feeld-ios", "title": "Feeld (iOS)", "summary": "Open-minded dating, dark-native. True-black canvas #000000 with one rationed acid-yellow #E8FF63 accent, desire pink #FF5C8A, a full-bleed 28pt Discover card w…", "tags": [ "bold", "premium", "romantic", "dating", "social" ], "colors": [ "#000000", "#FFFFFF", "#E8FF63", "#121212", "#A8A8A8" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/feeld-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/feeld-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/feeld-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/feeld-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/feeld-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/feeld-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/feeld-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/feeld-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/feeld-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/feeld-ios" }, "prompts": { "kit": "Use the Open Design design system \"feeld-ios\" for my designs.", "claudeDesign": "Add the \"Feeld (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/feeld-ios/project. Build a Design System artifact from them." } }, { "id": "ferrari", "title": "Ferrari", "summary": "Luxury automotive. Chiaroscuro editorial, Ferrari Red accents, cinematic black.", "tags": [ "premium", "bold", "editorial", "automotive" ], "colors": [ "#0b0b0b", "#fffaf0", "#dc0000", "#171717", "#a89f91" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/ferrari/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/ferrari/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/ferrari.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/ferrari/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/ferrari/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/ferrari/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/ferrari/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/ferrari/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/ferrari/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/ferrari" }, "prompts": { "kit": "Use the Open Design design system \"ferrari\" for my designs.", "claudeDesign": "Add the \"Ferrari\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/ferrari/project. Build a Design System artifact from them." } }, { "id": "fiction", "title": "Fiction", "summary": "A playful storybook-inspired interface: warm cream surfaces, chunky black outlines on every card and control, and a confident violet accent.", "tags": [ "playful", "warm", "education", "editorial" ], "colors": [ "#fce6c8", "#1e1b18", "#7c5cfc", "#fff8ec", "#6b6259" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/fiction/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/fiction/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/fiction.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/fiction/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/fiction/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/fiction/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/fiction/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/fiction/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/fiction/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/fiction" }, "prompts": { "kit": "Use the Open Design design system \"fiction\" for my designs.", "claudeDesign": "Add the \"Fiction\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/fiction/project. Build a Design System artifact from them." } }, { "id": "figma", "title": "Figma", "summary": "Collaborative design tool. Vibrant multi-color, playful yet professional.", "tags": [ "playful", "friendly", "creative", "saas" ], "colors": [ "#ffffff", "#000000", "rgba(0, 0, 0, 0.55)" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/figma/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/figma/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/figma.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/figma/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/figma/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/figma/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/figma/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/figma/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/figma/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/figma" }, "prompts": { "kit": "Use the Open Design design system \"figma\" for my designs.", "claudeDesign": "Add the \"Figma\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/figma/project. Build a Design System artifact from them." } }, { "id": "flat", "title": "Flat", "summary": "Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.", "tags": [ "minimal", "friendly", "consumer", "saas" ], "colors": [ "#f5f8ff", "#111827", "#f2673c", "#ffffff", "#667085" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/flat/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/flat/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/flat.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/flat/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/flat/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/flat/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/flat/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/flat/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/flat/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/flat" }, "prompts": { "kit": "Use the Open Design design system \"flat\" for my designs.", "claudeDesign": "Add the \"Flat\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/flat/project. Build a Design System artifact from them." } }, { "id": "flighty-ios", "title": "Flighty (iOS)", "summary": "Flight tracking. Flighty Blue #0A84FF on deep-black #0B0B0F, live great-circle flight arc, on-time stats, Live-Activity status bar, delay timeline", "tags": [ "technical", "premium", "travel" ], "colors": [ "#0B0B0F", "#FFFFFF", "#0A84FF", "#1A1A1F", "#8E8E96" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/flighty-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/flighty-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/flighty-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/flighty-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/flighty-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/flighty-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/flighty-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/flighty-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/flighty-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/flighty-ios" }, "prompts": { "kit": "Use the Open Design design system \"flighty-ios\" for my designs.", "claudeDesign": "Add the \"Flighty (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/flighty-ios/project. Build a Design System artifact from them." } }, { "id": "framer", "title": "Framer", "summary": "Website builder. Bold black and blue, motion-first, design-forward.", "tags": [ "bold", "technical", "creative", "saas" ], "colors": [ "#000000", "#ffffff", "#0099ff", "#090909", "rgba(255, 255, 255, 0.6)" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/framer/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/framer/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/framer.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/framer/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/framer/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/framer/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/framer/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/framer/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/framer/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/framer" }, "prompts": { "kit": "Use the Open Design design system \"framer\" for my designs.", "claudeDesign": "Add the \"Framer\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/framer/project. Build a Design System artifact from them." } }, { "id": "friendly", "title": "Friendly", "summary": "Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.", "tags": [ "friendly", "calm", "warm", "consumer", "wellness" ], "colors": [ "#fff8d7", "#1d1836", "#ff6b00", "#ffffff", "#796f91" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/friendly/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/friendly/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/friendly.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/friendly/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/friendly/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/friendly/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/friendly/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/friendly/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/friendly/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/friendly" }, "prompts": { "kit": "Use the Open Design design system \"friendly\" for my designs.", "claudeDesign": "Add the \"Friendly\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/friendly/project. Build a Design System artifact from them." } }, { "id": "futuristic", "title": "Futuristic", "summary": "Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.", "tags": [ "futuristic", "technical", "ai", "brand" ], "colors": [ "#090b12", "#f8fafc", "#60a5fa", "#121722", "#94a3b8" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/futuristic/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/futuristic/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/futuristic.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/futuristic/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/futuristic/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/futuristic/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/futuristic/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/futuristic/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/futuristic/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/futuristic" }, "prompts": { "kit": "Use the Open Design design system \"futuristic\" for my designs.", "claudeDesign": "Add the \"Futuristic\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/futuristic/project. Build a Design System artifact from them." } }, { "id": "geometric", "title": "Geometric", "summary": "A structured, geometric interface: neutral cool-gray surfaces, precise shapes, clean sans typography, and a single confident blue accent.", "tags": [ "minimal", "technical", "saas", "enterprise" ], "colors": [ "#f5f6f8", "#111827", "#3b82f6", "#ffffff", "#5b6472" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/geometric/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/geometric/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/geometric.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/geometric/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/geometric/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/geometric/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/geometric/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/geometric/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/geometric/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/geometric" }, "prompts": { "kit": "Use the Open Design design system \"geometric\" for my designs.", "claudeDesign": "Add the \"Geometric\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/geometric/project. Build a Design System artifact from them." } }, { "id": "github", "title": "GitHub", "summary": "Code-forward platform. Functional density, blue-on-white precision, Primer foundations.", "tags": [ "technical", "developer" ], "colors": [ "#ffffff", "#1f2328", "#0969da", "#f6f8fa", "#656d76" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/github/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/github/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/github.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/github/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/github/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/github/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/github/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/github/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/github/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/github" }, "prompts": { "kit": "Use the Open Design design system \"github\" for my designs.", "claudeDesign": "Add the \"GitHub\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/github/project. Build a Design System artifact from them." } }, { "id": "glassmorphism", "title": "Glassmorphism", "summary": "Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.", "tags": [ "futuristic", "elegant", "consumer", "brand" ], "colors": [ "#eef6ff", "#102033", "#4f8cff", "rgba(255, 255, 255, 0.74)", "#60708a" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/glassmorphism/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/glassmorphism/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/glassmorphism.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/glassmorphism/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/glassmorphism/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/glassmorphism/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/glassmorphism/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/glassmorphism/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/glassmorphism/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/glassmorphism" }, "prompts": { "kit": "Use the Open Design design system \"glassmorphism\" for my designs.", "claudeDesign": "Add the \"Glassmorphism\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/glassmorphism/project. Build a Design System artifact from them." } }, { "id": "goodreads-ios", "title": "Goodreads (iOS)", "summary": "Books, reviews & reading tracking. Warm tan paper canvas (#F4F1EA light, ink-brown #161310 dark) with literary brown #382110 chrome, full-color cover grids, th…", "tags": [ "warm", "editorial", "media", "social" ], "colors": [ "#F4F1EA", "#382110", "#409D69", "#FFFFFF", "#6B5E47" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/goodreads-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/goodreads-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/goodreads-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/goodreads-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/goodreads-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/goodreads-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/goodreads-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/goodreads-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/goodreads-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/goodreads-ios" }, "prompts": { "kit": "Use the Open Design design system \"goodreads-ios\" for my designs.", "claudeDesign": "Add the \"Goodreads (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/goodreads-ios/project. Build a Design System artifact from them." } }, { "id": "gradient", "title": "Gradient", "summary": "Smooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth.", "tags": [ "playful", "bold", "consumer", "brand" ], "colors": [ "#f7f3ff", "#191225", "#7c3aed", "#ffffff", "#746985" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/gradient/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/gradient/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/gradient.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/gradient/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/gradient/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/gradient/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/gradient/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/gradient/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/gradient/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/gradient" }, "prompts": { "kit": "Use the Open Design design system \"gradient\" for my designs.", "claudeDesign": "Add the \"Gradient\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/gradient/project. Build a Design System artifact from them." } }, { "id": "hashicorp", "title": "HashiCorp", "summary": "Infrastructure automation. Enterprise-clean, black and white.", "tags": [ "corporate", "technical", "developer", "enterprise" ], "colors": [ "#15181e", "#efeff1", "#1060ff", "#0d0e12", "#b2b6bd" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/hashicorp/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/hashicorp/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/hashicorp.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/hashicorp/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/hashicorp/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/hashicorp/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/hashicorp/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/hashicorp/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/hashicorp/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/hashicorp" }, "prompts": { "kit": "Use the Open Design design system \"hashicorp\" for my designs.", "claudeDesign": "Add the \"HashiCorp\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/hashicorp/project. Build a Design System artifact from them." } }, { "id": "headspace-ios", "title": "Headspace (iOS)", "summary": "Meditation + sleep. Butter-cream canvas #FFF7E7, Marigold #FF6B35 primary + Aurora gradient (peach → butter → marigold) wash, 234pt breathing meditation sphere…", "tags": [ "calm", "warm", "friendly", "wellness" ], "colors": [ "#FFF7E7", "#2E1A47", "#FF6B35", "#FBF1DA", "#594675" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/headspace-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/headspace-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/headspace-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/headspace-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/headspace-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/headspace-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/headspace-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/headspace-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/headspace-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/headspace-ios" }, "prompts": { "kit": "Use the Open Design design system \"headspace-ios\" for my designs.", "claudeDesign": "Add the \"Headspace (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/headspace-ios/project. Build a Design System artifact from them." } }, { "id": "hud", "title": "HUD Design System", "summary": "Fighter jet / helicopter head-up display. Phosphor green on near-black, all-caps data overlays, angular geometry. Zero ambiguity at speed and altitude.", "tags": [ "technical", "futuristic", "dashboard", "gaming" ], "colors": [ "#090b12", "#f8fafc", "#60a5fa", "#121722", "#94a3b8" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/hud/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/hud/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/hud.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/hud/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/hud/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/hud/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/hud/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/hud/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/hud/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/hud" }, "prompts": { "kit": "Use the Open Design design system \"hud\" for my designs.", "claudeDesign": "Add the \"HUD Design System\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/hud/project. Build a Design System artifact from them." } }, { "id": "huggingface", "title": "Hugging Face", "summary": "ML community hub. Sunny yellow accent, monospace identity, cheerful and dense.", "tags": [ "friendly", "technical", "ai", "developer" ], "colors": [ "#fafafa", "#0d1117", "#ffd21e", "#ffffff", "#6b7280" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/huggingface/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/huggingface/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/huggingface.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/huggingface/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/huggingface/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/huggingface/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/huggingface/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/huggingface/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/huggingface/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/huggingface" }, "prompts": { "kit": "Use the Open Design design system \"huggingface\" for my designs.", "claudeDesign": "Add the \"Hugging Face\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/huggingface/project. Build a Design System artifact from them." } }, { "id": "ibm", "title": "IBM", "summary": "Enterprise technology. Carbon design system, structured blue palette.", "tags": [ "corporate", "technical", "enterprise" ], "colors": [ "#ffffff", "#161616", "#0f62fe", "#f4f4f4", "#6f6f6f" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/ibm/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/ibm/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/ibm.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/ibm/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/ibm/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/ibm/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/ibm/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/ibm/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/ibm/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/ibm" }, "prompts": { "kit": "Use the Open Design design system \"ibm\" for my designs.", "claudeDesign": "Add the \"IBM\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/ibm/project. Build a Design System artifact from them." } }, { "id": "immersive", "title": "Immersive", "summary": "An exhibit-style, game-like interface: a continuous deep-green canvas, chunky comic-panel outlines, and a bright magenta pop reserved for highlights.", "tags": [ "bold", "playful", "gaming", "education" ], "colors": [ "#0b5c34", "#f5faf6", "#f062b0", "#14713f", "#b9d6c2" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/immersive/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/immersive/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/immersive.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/immersive/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/immersive/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/immersive/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/immersive/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/immersive/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/immersive/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/immersive" }, "prompts": { "kit": "Use the Open Design design system \"immersive\" for my designs.", "claudeDesign": "Add the \"Immersive\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/immersive/project. Build a Design System artifact from them." } }, { "id": "impeccable", "title": "Impeccable", "summary": "A graphic editorial-poster aesthetic: warm cream surfaces, a confident amber accent, and a burnt-orange secondary carried in supporting graphics.", "tags": [ "editorial", "warm", "bold", "creative", "brand" ], "colors": [ "#f2e9d3", "#1c1712", "#cc8800", "#fbf6ea", "#7a6e5a" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/impeccable/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/impeccable/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/impeccable.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/impeccable/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/impeccable/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/impeccable/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/impeccable/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/impeccable/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/impeccable/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/impeccable" }, "prompts": { "kit": "Use the Open Design design system \"impeccable\" for my designs.", "claudeDesign": "Add the \"Impeccable\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/impeccable/project. Build a Design System artifact from them." } }, { "id": "intercom", "title": "Intercom", "summary": "Customer messaging. Friendly blue palette, conversational UI patterns.", "tags": [ "friendly", "saas" ], "colors": [ "#faf9f6", "#111111", "#ff5600", "#ffffff", "#7b7b78" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/intercom/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/intercom/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/intercom.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/intercom/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/intercom/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/intercom/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/intercom/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/intercom/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/intercom/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/intercom" }, "prompts": { "kit": "Use the Open Design design system \"intercom\" for my designs.", "claudeDesign": "Add the \"Intercom\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/intercom/project. Build a Design System artifact from them." } }, { "id": "kami", "title": "kami (紙 / 纸)", "summary": "Editorial paper system: warm parchment canvas, ink-blue accent, serif-led hierarchy. Built for resumes, one-pagers, white papers, portfolios, slide decks — anything that should feel like high-quality print rather than U…", "tags": [ "editorial", "calm", "elegant" ], "colors": [ "#f5f4ed", "#141413", "#1b365d", "#faf9f5", "#504e49" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/kami/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/kami/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/kami.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/kami/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/kami/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/kami/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/kami/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/kami/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/kami/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/kami" }, "prompts": { "kit": "Use the Open Design design system \"kami\" for my designs.", "claudeDesign": "Add the \"kami (紙 / 纸)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/kami/project. Build a Design System artifact from them." } }, { "id": "kraken", "title": "Kraken", "summary": "Crypto trading. Purple-accented dark UI, data-dense dashboards.", "tags": [ "technical", "bold", "finance" ], "colors": [ "#0b1020", "#f8fafc", "#7132f5", "#121a33", "#8b95aa" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/kraken/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/kraken/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/kraken.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/kraken/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/kraken/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/kraken/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/kraken/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/kraken/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/kraken/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/kraken" }, "prompts": { "kit": "Use the Open Design design system \"kraken\" for my designs.", "claudeDesign": "Add the \"Kraken\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/kraken/project. Build a Design System artifact from them." } }, { "id": "lamborghini", "title": "Lamborghini", "summary": "Supercar brand. True black surfaces, gold accents, dramatic uppercase typography.", "tags": [ "premium", "bold", "automotive" ], "colors": [ "#050505", "#f8f4e6", "#d4af37", "#141414", "#9b927d" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/lamborghini/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/lamborghini/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/lamborghini.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/lamborghini/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/lamborghini/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/lamborghini/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/lamborghini/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/lamborghini/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/lamborghini/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/lamborghini" }, "prompts": { "kit": "Use the Open Design design system \"lamborghini\" for my designs.", "claudeDesign": "Add the \"Lamborghini\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/lamborghini/project. Build a Design System artifact from them." } }, { "id": "levels", "title": "Levels", "summary": "Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed.", "tags": [ "minimal", "bold", "saas", "commerce" ], "colors": [ "#fbf7ef", "#1f2a24", "#2f8f46", "#ffffff", "#788276" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/levels/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/levels/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/levels.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/levels/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/levels/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/levels/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/levels/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/levels/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/levels/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/levels" }, "prompts": { "kit": "Use the Open Design design system \"levels\" for my designs.", "claudeDesign": "Add the \"Levels\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/levels/project. Build a Design System artifact from them." } }, { "id": "linear-app", "title": "Linear", "summary": "Project management. Ultra-minimal, precise, purple accent.", "tags": [ "minimal", "technical", "premium", "saas", "developer" ], "colors": [ "#08090a", "#f7f8f8", "#5e6ad2", "#191a1b", "#8a8f98" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/linear-app/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/linear-app/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/linear-app.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/linear-app/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/linear-app/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/linear-app/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/linear-app/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/linear-app/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/linear-app/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/linear-app" }, "prompts": { "kit": "Use the Open Design design system \"linear-app\" for my designs.", "claudeDesign": "Add the \"Linear\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/linear-app/project. Build a Design System artifact from them." } }, { "id": "linear-ios", "title": "Linear (iOS)", "summary": "Fast issue tracker. Linear Purple #5E6AD2 on near-OLED #08090A, ultra-dense issue list, the Cmd+K command menu, cycle bars, drawn status iconography", "tags": [ "minimal", "technical", "saas", "developer" ], "colors": [ "#08090A", "#F7F8F8", "#5E6AD2", "#141516", "#8A8F98" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/linear-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/linear-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/linear-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/linear-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/linear-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/linear-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/linear-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/linear-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/linear-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/linear-ios" }, "prompts": { "kit": "Use the Open Design design system \"linear-ios\" for my designs.", "claudeDesign": "Add the \"Linear (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/linear-ios/project. Build a Design System artifact from them." } }, { "id": "lingo", "title": "Lingo", "summary": "Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.", "tags": [ "playful", "friendly", "education", "consumer" ], "colors": [ "#fbf9ff", "#3c3c3c", "#58cc02", "#ffffff", "#786f8f" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/lingo/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/lingo/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/lingo.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/lingo/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/lingo/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/lingo/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/lingo/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/lingo/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/lingo/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/lingo" }, "prompts": { "kit": "Use the Open Design design system \"lingo\" for my designs.", "claudeDesign": "Add the \"Lingo\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/lingo/project. Build a Design System artifact from them." } }, { "id": "loom", "title": "Loom Design System", "summary": "Loom async video. Purple primary, friendly surfaces, video-first layout. Clean and professional without being corporate.", "tags": [ "friendly", "saas", "media" ], "colors": [ "#ffffff", "#1f1f23", "#625df5", "#f7f7f8", "#6b6d76" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/loom/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/loom/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/loom.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/loom/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/loom/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/loom/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/loom/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/loom/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/loom/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/loom" }, "prompts": { "kit": "Use the Open Design design system \"loom\" for my designs.", "claudeDesign": "Add the \"Loom Design System\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/loom/project. Build a Design System artifact from them." } }, { "id": "lovable", "title": "Lovable", "summary": "AI full-stack builder. Playful gradients, friendly dev aesthetic.", "tags": [ "playful", "friendly", "developer", "ai" ], "colors": [ "#f7f4ed", "#1c1c1c", "#ff4d8d", "#5f5f5d" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/lovable/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/lovable/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/lovable.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/lovable/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/lovable/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/lovable/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/lovable/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/lovable/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/lovable/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/lovable" }, "prompts": { "kit": "Use the Open Design design system \"lovable\" for my designs.", "claudeDesign": "Add the \"Lovable\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/lovable/project. Build a Design System artifact from them." } }, { "id": "luxury", "title": "Luxury", "summary": "High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for luxury brand experiences.", "tags": [ "premium", "elegant", "romantic", "brand", "commerce" ], "colors": [ "#080706", "#fff8ea", "#c6a15b", "#151310", "#9f927c" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/luxury/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/luxury/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/luxury.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/luxury/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/luxury/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/luxury/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/luxury/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/luxury/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/luxury/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/luxury" }, "prompts": { "kit": "Use the Open Design design system \"luxury\" for my designs.", "claudeDesign": "Add the \"Luxury\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/luxury/project. Build a Design System artifact from them." } }, { "id": "lyft-ios", "title": "Lyft (iOS)", "summary": "Ride-hailing. Single Lyft Pink #FF00BF accent, map-as-hero with no tab bar, very-rounded springy ride-type selector sheet (Wait & Save / Standard / XL / Lux Bl…", "tags": [ "playful", "friendly", "travel" ], "colors": [ "#FFFFFF", "#11111F", "#FF00BF", "#F4F4F7", "#6B6B7B" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/lyft-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/lyft-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/lyft-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/lyft-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/lyft-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/lyft-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/lyft-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/lyft-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/lyft-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/lyft-ios" }, "prompts": { "kit": "Use the Open Design design system \"lyft-ios\" for my designs.", "claudeDesign": "Add the \"Lyft (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/lyft-ios/project. Build a Design System artifact from them." } }, { "id": "mastercard", "title": "Mastercard", "summary": "Global payments network. Warm cream canvas, orbital pill shapes, editorial warmth.", "tags": [ "warm", "editorial", "corporate", "finance" ], "colors": [ "#f3f0ee", "#141413", "#cf4500", "#fcfbfa", "#696969" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/mastercard/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/mastercard/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/mastercard.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/mastercard/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/mastercard/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/mastercard/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/mastercard/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/mastercard/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/mastercard/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/mastercard" }, "prompts": { "kit": "Use the Open Design design system \"mastercard\" for my designs.", "claudeDesign": "Add the \"Mastercard\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/mastercard/project. Build a Design System artifact from them." } }, { "id": "material", "title": "Material", "summary": "Google's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns.", "tags": [ "friendly", "corporate", "saas", "consumer" ], "colors": [ "#f8fafd", "#202124", "#1a73e8", "#ffffff", "#5f6368" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/material/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/material/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/material.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/material/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/material/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/material/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/material/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/material/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/material/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/material" }, "prompts": { "kit": "Use the Open Design design system \"material\" for my designs.", "claudeDesign": "Add the \"Material\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/material/project. Build a Design System artifact from them." } }, { "id": "matrix", "title": "Matrix", "summary": "A dark cyber-terminal visual language: mono typography everywhere, dense data layouts, and one terminal-green interaction accent.", "tags": [ "technical", "futuristic", "developer" ], "colors": [ "#0b0c14", "#e8ecef", "#2db58a", "#12141f", "#6e7681" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/matrix/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/matrix/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/matrix.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/matrix/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/matrix/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/matrix/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/matrix/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/matrix/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/matrix/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/matrix" }, "prompts": { "kit": "Use the Open Design design system \"matrix\" for my designs.", "claudeDesign": "Add the \"Matrix\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/matrix/project. Build a Design System artifact from them." } }, { "id": "meta", "title": "Meta (Store)", "summary": "Tech retail store. Photography-first, binary light/dark surfaces, Meta Blue CTAs.", "tags": [ "minimal", "commerce", "consumer" ], "colors": [ "#ffffff", "#1c2b33", "#0064e0", "#f7f8fa", "#65676b" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/meta/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/meta/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/meta.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/meta/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/meta/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/meta/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/meta/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/meta/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/meta/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/meta" }, "prompts": { "kit": "Use the Open Design design system \"meta\" for my designs.", "claudeDesign": "Add the \"Meta (Store)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/meta/project. Build a Design System artifact from them." } }, { "id": "minimal", "title": "Minimal", "summary": "Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.", "tags": [ "minimal", "calm", "saas", "brand" ], "colors": [ "#ffffff", "#111111", "#fafafa", "#777777" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/minimal/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/minimal/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/minimal.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/minimal/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/minimal/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/minimal/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/minimal/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/minimal/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/minimal/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/minimal" }, "prompts": { "kit": "Use the Open Design design system \"minimal\" for my designs.", "claudeDesign": "Add the \"Minimal\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/minimal/project. Build a Design System artifact from them." } }, { "id": "minimax", "title": "MiniMax", "summary": "AI model provider. Bold dark interface with neon accents.", "tags": [ "bold", "futuristic", "ai" ], "colors": [ "#ffffff", "#222222", "#1456f0", "#fafafa", "#45515e" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/minimax/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/minimax/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/minimax.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/minimax/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/minimax/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/minimax/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/minimax/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/minimax/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/minimax/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/minimax" }, "prompts": { "kit": "Use the Open Design design system \"minimax\" for my designs.", "claudeDesign": "Add the \"MiniMax\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/minimax/project. Build a Design System artifact from them." } }, { "id": "mintlify", "title": "Mintlify", "summary": "Documentation platform. Clean, green-accented, reading-optimized.", "tags": [ "minimal", "calm", "technical", "developer", "saas" ], "colors": [ "#ffffff", "#0d0d0d", "#18E299", "#666666" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/mintlify/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/mintlify/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/mintlify.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/mintlify/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/mintlify/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/mintlify/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/mintlify/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/mintlify/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/mintlify/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/mintlify" }, "prompts": { "kit": "Use the Open Design design system \"mintlify\" for my designs.", "claudeDesign": "Add the \"Mintlify\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/mintlify/project. Build a Design System artifact from them." } }, { "id": "miro", "title": "Miro", "summary": "Visual collaboration. Bright yellow accent, infinite canvas aesthetic.", "tags": [ "friendly", "playful", "saas", "creative" ], "colors": [ "#fff7c2", "#050038", "#ffd02f", "#ffffff", "#605a8a" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/miro/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/miro/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/miro.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/miro/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/miro/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/miro/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/miro/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/miro/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/miro/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/miro" }, "prompts": { "kit": "Use the Open Design design system \"miro\" for my designs.", "claudeDesign": "Add the \"Miro\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/miro/project. Build a Design System artifact from them." } }, { "id": "mission-control", "title": "Mission Control Design System", "summary": "Space/aerospace mission monitoring. Dark command center, amber telemetry, monospace precision. Functional clarity above all else.", "tags": [ "technical", "dashboard" ], "colors": [ "#090b12", "#f8fafc", "#60a5fa", "#121722", "#94a3b8" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/mission-control/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/mission-control/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/mission-control.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/mission-control/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/mission-control/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/mission-control/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/mission-control/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/mission-control/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/mission-control/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/mission-control" }, "prompts": { "kit": "Use the Open Design design system \"mission-control\" for my designs.", "claudeDesign": "Add the \"Mission Control Design System\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/mission-control/project. Build a Design System artifact from them." } }, { "id": "mistral-ai", "title": "Mistral AI", "summary": "Open-weight LLM provider. French-engineered minimalism, purple-toned.", "tags": [ "minimal", "premium", "ai" ], "colors": [ "#fffaeb", "#1f1f1f", "#fa520f", "#fff0c2", "#3d3d3d" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/mistral-ai/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/mistral-ai/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/mistral-ai.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/mistral-ai/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/mistral-ai/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/mistral-ai/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/mistral-ai/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/mistral-ai/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/mistral-ai/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/mistral-ai" }, "prompts": { "kit": "Use the Open Design design system \"mistral-ai\" for my designs.", "claudeDesign": "Add the \"Mistral AI\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/mistral-ai/project. Build a Design System artifact from them." } }, { "id": "modern", "title": "Modern", "summary": "Contemporary editorial style with serif typography, minimal palettes, and clean layouts for polished digital products.", "tags": [ "editorial", "minimal", "elegant", "saas" ], "colors": [ "#f7f8fc", "#111827", "#4f46e5", "#ffffff", "#6b7280" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/modern/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/modern/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/modern.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/modern/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/modern/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/modern/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/modern/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/modern/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/modern/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/modern" }, "prompts": { "kit": "Use the Open Design design system \"modern\" for my designs.", "claudeDesign": "Add the \"Modern\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/modern/project. Build a Design System artifact from them." } }, { "id": "mongodb", "title": "MongoDB", "summary": "Document database. Green leaf branding, developer documentation focus.", "tags": [ "technical", "developer" ], "colors": [ "#001e2b", "#ffffff", "#00ed64", "#1c2d38", "#b8c4c2" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/mongodb/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/mongodb/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/mongodb.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/mongodb/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/mongodb/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/mongodb/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/mongodb/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/mongodb/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/mongodb/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/mongodb" }, "prompts": { "kit": "Use the Open Design design system \"mongodb\" for my designs.", "claudeDesign": "Add the \"MongoDB\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/mongodb/project. Build a Design System artifact from them." } }, { "id": "mono", "title": "Mono", "summary": "Monospace-driven, matrix-inspired design with high-contrast elements, compact density, and a hacker-chic aesthetic.", "tags": [ "technical", "minimal", "developer" ], "colors": [ "#ffffff", "#111111", "#f7f7f7", "#707070" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/mono/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/mono/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/mono.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/mono/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/mono/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/mono/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/mono/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/mono/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/mono/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/mono" }, "prompts": { "kit": "Use the Open Design design system \"mono\" for my designs.", "claudeDesign": "Add the \"Mono\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/mono/project. Build a Design System artifact from them." } }, { "id": "monzo-ios", "title": "Monzo (iOS)", "summary": "Neobank with the iconic Hot Coral card. Coral-and-navy palette (#FF3464 card hero on #14233C navy), round Pot coins with savings goals, and a day-grouped emoji…", "tags": [ "bold", "friendly", "finance" ], "colors": [ "#F6F7F9", "#14233C", "#FF3464", "#FFFFFF", "#5C6B82" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/monzo-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/monzo-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/monzo-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/monzo-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/monzo-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/monzo-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/monzo-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/monzo-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/monzo-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/monzo-ios" }, "prompts": { "kit": "Use the Open Design design system \"monzo-ios\" for my designs.", "claudeDesign": "Add the \"Monzo (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/monzo-ios/project. Build a Design System artifact from them." } }, { "id": "neobrutalism", "title": "Neobrutalism", "summary": "Modern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces.", "tags": [ "bold", "playful", "brand", "creative" ], "colors": [ "#fff4cf", "#2a1810", "#d24b1f", "#fffaf0", "#8a6652" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/neobrutalism/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/neobrutalism/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/neobrutalism.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/neobrutalism/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/neobrutalism/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/neobrutalism/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/neobrutalism/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/neobrutalism/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/neobrutalism/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/neobrutalism" }, "prompts": { "kit": "Use the Open Design design system \"neobrutalism\" for my designs.", "claudeDesign": "Add the \"Neobrutalism\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/neobrutalism/project. Build a Design System artifact from them." } }, { "id": "neon", "title": "Neon", "summary": "Electric neon glow effects with high-contrast color pairings for bold, attention-grabbing interfaces.", "tags": [ "bold", "futuristic", "gaming", "brand" ], "colors": [ "#070711", "#f8f7ff", "#c084fc", "#111126", "#9d8ad4" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/neon/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/neon/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/neon.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/neon/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/neon/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/neon/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/neon/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/neon/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/neon/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/neon" }, "prompts": { "kit": "Use the Open Design design system \"neon\" for my designs.", "claudeDesign": "Add the \"Neon\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/neon/project. Build a Design System artifact from them." } }, { "id": "netflix-ios", "title": "Netflix (iOS)", "summary": "Streaming. Netflix Red #E50914 on #141414 canvas, hero trailer auto-play, Top 10 numeral row, Continue Watching progress bar, Netflix Sans", "tags": [ "bold", "media" ], "colors": [ "#141414", "#FFFFFF", "#E50914", "#1F1F1F", "#AAAAAA" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/netflix-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/netflix-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/netflix-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/netflix-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/netflix-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/netflix-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/netflix-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/netflix-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/netflix-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/netflix-ios" }, "prompts": { "kit": "Use the Open Design design system \"netflix-ios\" for my designs.", "claudeDesign": "Add the \"Netflix (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/netflix-ios/project. Build a Design System artifact from them." } }, { "id": "neumorphism", "title": "Neumorphism", "summary": "Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.", "tags": [ "calm", "minimal", "consumer" ], "colors": [ "#f7eee6", "#2b211c", "#b46a46", "#fff8f1", "#8a7a70" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/neumorphism/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/neumorphism/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/neumorphism.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/neumorphism/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/neumorphism/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/neumorphism/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/neumorphism/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/neumorphism/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/neumorphism/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/neumorphism" }, "prompts": { "kit": "Use the Open Design design system \"neumorphism\" for my designs.", "claudeDesign": "Add the \"Neumorphism\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/neumorphism/project. Build a Design System artifact from them." } }, { "id": "nike", "title": "Nike", "summary": "Athletic retail. Monochrome UI, massive uppercase type, full-bleed photography.", "tags": [ "bold", "commerce" ], "colors": [ "#ffffff", "#111111", "#f5f5f5", "#707072" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/nike/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/nike/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/nike.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/nike/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/nike/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/nike/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/nike/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/nike/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/nike/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/nike" }, "prompts": { "kit": "Use the Open Design design system \"nike\" for my designs.", "claudeDesign": "Add the \"Nike\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/nike/project. Build a Design System artifact from them." } }, { "id": "nike-run-club-ios", "title": "Nike Run Club (iOS)", "summary": "Run coaching. True-black canvas + Volt #CCFF00 accent on the 280pt progress ring, 88pt Trade Gothic Heavy Condensed elapsed time, hexagonal achievement medals,…", "tags": [ "bold", "wellness" ], "colors": [ "#000000", "#FFFFFF", "#CCFF00", "#1A1A1A", "#B3B3B3" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/nike-run-club-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/nike-run-club-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/nike-run-club-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/nike-run-club-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/nike-run-club-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/nike-run-club-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/nike-run-club-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/nike-run-club-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/nike-run-club-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/nike-run-club-ios" }, "prompts": { "kit": "Use the Open Design design system \"nike-run-club-ios\" for my designs.", "claudeDesign": "Add the \"Nike Run Club (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/nike-run-club-ios/project. Build a Design System artifact from them." } }, { "id": "notion", "title": "Notion", "summary": "All-in-one workspace. Warm minimalism, serif headings, soft surfaces.", "tags": [ "warm", "minimal", "calm", "saas" ], "colors": [ "#ffffff", "rgba(0, 0, 0, 0.95)", "#0075de", "#f6f5f4", "#615d59" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/notion/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/notion/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/notion.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/notion/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/notion/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/notion/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/notion/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/notion/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/notion/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/notion" }, "prompts": { "kit": "Use the Open Design design system \"notion\" for my designs.", "claudeDesign": "Add the \"Notion\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/notion/project. Build a Design System artifact from them." } }, { "id": "nubank-ios", "title": "Nubank (iOS)", "summary": "Latin America's purple neobank. Full-bleed Nu Purple hero (#820AD1) over a calm tile stack on deep aubergine #15101C, the Roxinho credit card as a #9B2BE0 grad…", "tags": [ "friendly", "bold", "finance" ], "colors": [ "#F4F2F7", "#1A1523", "#820AD1", "#FFFFFF", "#6B6178" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/nubank-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/nubank-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/nubank-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/nubank-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/nubank-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/nubank-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/nubank-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/nubank-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/nubank-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/nubank-ios" }, "prompts": { "kit": "Use the Open Design design system \"nubank-ios\" for my designs.", "claudeDesign": "Add the \"Nubank (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/nubank-ios/project. Build a Design System artifact from them." } }, { "id": "nvidia", "title": "NVIDIA", "summary": "GPU computing. Green-black energy, technical power aesthetic.", "tags": [ "technical", "bold", "consumer", "ai" ], "colors": [ "#000000", "#ffffff", "#76b900", "#1a1a1a", "#757575" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/nvidia/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/nvidia/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/nvidia.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/nvidia/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/nvidia/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/nvidia/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/nvidia/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/nvidia/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/nvidia/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/nvidia" }, "prompts": { "kit": "Use the Open Design design system \"nvidia\" for my designs.", "claudeDesign": "Add the \"NVIDIA\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/nvidia/project. Build a Design System artifact from them." } }, { "id": "ollama", "title": "Ollama", "summary": "Run LLMs locally. Terminal-first, monochrome simplicity.", "tags": [ "minimal", "technical", "ai", "developer" ], "colors": [ "#ffffff", "#000000", "#fafafa", "#737373" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/ollama/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/ollama/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/ollama.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/ollama/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/ollama/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/ollama/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/ollama/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/ollama/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/ollama/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/ollama" }, "prompts": { "kit": "Use the Open Design design system \"ollama\" for my designs.", "claudeDesign": "Add the \"Ollama\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/ollama/project. Build a Design System artifact from them." } }, { "id": "openai", "title": "OpenAI", "summary": "Calm, near-monochrome system anchored in deep teal-black with generous white space and editorial typography.", "tags": [ "calm", "minimal", "editorial", "ai" ], "colors": [ "#ffffff", "#0d0d0d", "#10a37f", "#f5f5f5", "#6e6e6e" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/openai/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/openai/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/openai.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/openai/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/openai/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/openai/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/openai/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/openai/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/openai/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/openai" }, "prompts": { "kit": "Use the Open Design design system \"openai\" for my designs.", "claudeDesign": "Add the \"OpenAI\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/openai/project. Build a Design System artifact from them." } }, { "id": "opencode-ai", "title": "OpenCode", "summary": "AI coding platform. Developer-centric dark theme.", "tags": [ "technical", "developer", "ai" ], "colors": [ "#201d1d", "#fdfcfc", "#007aff", "#302c2c", "#9a9898" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/opencode-ai/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/opencode-ai/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/opencode-ai.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/opencode-ai/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/opencode-ai/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/opencode-ai/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/opencode-ai/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/opencode-ai/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/opencode-ai/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/opencode-ai" }, "prompts": { "kit": "Use the Open Design design system \"opencode-ai\" for my designs.", "claudeDesign": "Add the \"OpenCode\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/opencode-ai/project. Build a Design System artifact from them." } }, { "id": "oura-ios", "title": "Oura (iOS)", "summary": "Health ring. Cool-charcoal #0B0B0F instrument panel, tri-domain score rings (Readiness teal #4FD1C5 / Sleep indigo #7C6FF0 / Activity amber #F5A623), contribut…", "tags": [ "calm", "premium", "technical", "wellness" ], "colors": [ "#0B0B0F", "#FFFFFF", "#4FD1C5", "#16161C", "#9A9AA5" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/oura-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/oura-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/oura-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/oura-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/oura-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/oura-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/oura-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/oura-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/oura-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/oura-ios" }, "prompts": { "kit": "Use the Open Design design system \"oura-ios\" for my designs.", "claudeDesign": "Add the \"Oura (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/oura-ios/project. Build a Design System artifact from them." } }, { "id": "pacman", "title": "Pacman", "summary": "Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.", "tags": [ "retro", "playful", "gaming" ], "colors": [ "#050505", "#fff7d6", "#ffcc00", "#101014", "#b9a85d" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/pacman/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/pacman/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/pacman.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/pacman/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/pacman/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/pacman/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/pacman/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/pacman/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/pacman/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/pacman" }, "prompts": { "kit": "Use the Open Design design system \"pacman\" for my designs.", "claudeDesign": "Add the \"Pacman\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/pacman/project. Build a Design System artifact from them." } }, { "id": "paper", "title": "Paper", "summary": "Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.", "tags": [ "retro", "editorial", "calm", "creative" ], "colors": [ "#faf3df", "#211b12", "#8f5d24", "#fffaf0", "#7c7160" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/paper/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/paper/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/paper.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/paper/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/paper/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/paper/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/paper/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/paper/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/paper/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/paper" }, "prompts": { "kit": "Use the Open Design design system \"paper\" for my designs.", "claudeDesign": "Add the \"Paper\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/paper/project. Build a Design System artifact from them." } }, { "id": "perplexity", "title": "Perplexity AI", "summary": "Conversational AI search engine. Deep-dark canvas, sharp typography, single violet accent, dense information hierarchy.", "tags": [ "technical", "minimal", "ai" ], "colors": [ "#0f0f10", "#f0f0f0", "#a855f7", "#19191a", "#9b9b9b" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/perplexity/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/perplexity/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/perplexity.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/perplexity/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/perplexity/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/perplexity/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/perplexity/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/perplexity/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/perplexity/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/perplexity" }, "prompts": { "kit": "Use the Open Design design system \"perplexity\" for my designs.", "claudeDesign": "Add the \"Perplexity AI\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/perplexity/project. Build a Design System artifact from them." } }, { "id": "perspective", "title": "Perspective", "summary": "Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.", "tags": [ "futuristic", "artistic", "creative", "brand" ], "colors": [ "#f5f8ff", "#111827", "#00bd7d", "#ffffff", "#667085" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/perspective/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/perspective/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/perspective.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/perspective/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/perspective/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/perspective/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/perspective/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/perspective/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/perspective/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/perspective" }, "prompts": { "kit": "Use the Open Design design system \"perspective\" for my designs.", "claudeDesign": "Add the \"Perspective\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/perspective/project. Build a Design System artifact from them." } }, { "id": "pinterest", "title": "Pinterest", "summary": "Visual discovery. Red accent, masonry grid, image-first.", "tags": [ "friendly", "social", "consumer" ], "colors": [ "#ffffff", "#211922", "#e60023", "#f6f6f3", "#62625b" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/pinterest/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/pinterest/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/pinterest.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/pinterest/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/pinterest/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/pinterest/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/pinterest/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/pinterest/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/pinterest/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/pinterest" }, "prompts": { "kit": "Use the Open Design design system \"pinterest\" for my designs.", "claudeDesign": "Add the \"Pinterest\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/pinterest/project. Build a Design System artifact from them." } }, { "id": "playstation", "title": "PlayStation", "summary": "Gaming console retail. Three-surface channel layout, quiet-authority display type, cyan hover-scale.", "tags": [ "premium", "bold", "gaming" ], "colors": [ "#000000", "#ffffff", "#0070cc", "#cccccc" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/playstation/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/playstation/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/playstation.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/playstation/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/playstation/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/playstation/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/playstation/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/playstation/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/playstation/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/playstation" }, "prompts": { "kit": "Use the Open Design design system \"playstation\" for my designs.", "claudeDesign": "Add the \"PlayStation\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/playstation/project. Build a Design System artifact from them." } }, { "id": "pocket-casts-ios", "title": "Pocket Casts (iOS)", "summary": "Premium podcast player with per-podcast theming. Pocket Casts Red #F43E37 on near-black #1A1A1A, cover-art theme tint #E0533C, circular transport, and a reorde…", "tags": [ "bold", "media" ], "colors": [ "#1A1A1A", "#FFFFFF", "#F43E37", "#232323", "#B8B8B8" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/pocket-casts-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/pocket-casts-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/pocket-casts-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/pocket-casts-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/pocket-casts-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/pocket-casts-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/pocket-casts-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/pocket-casts-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/pocket-casts-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/pocket-casts-ios" }, "prompts": { "kit": "Use the Open Design design system \"pocket-casts-ios\" for my designs.", "claudeDesign": "Add the \"Pocket Casts (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/pocket-casts-ios/project. Build a Design System artifact from them." } }, { "id": "posthog", "title": "PostHog", "summary": "Product analytics. Playful hedgehog branding, developer-friendly dark UI.", "tags": [ "playful", "technical", "developer", "dashboard" ], "colors": [ "#fdfdf8", "#4d4f46", "#F54E00", "#eeefe9", "#65675e" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/posthog/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/posthog/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/posthog.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/posthog/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/posthog/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/posthog/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/posthog/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/posthog/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/posthog/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/posthog" }, "prompts": { "kit": "Use the Open Design design system \"posthog\" for my designs.", "claudeDesign": "Add the \"PostHog\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/posthog/project. Build a Design System artifact from them." } }, { "id": "power", "title": "Power", "summary": "A high-end dark aesthetic for premium brand experiences: deep indigo-black canvas, bold headlines, and a single confident orange accent on pill controls.", "tags": [ "premium", "bold", "brand" ], "colors": [ "#201f33", "#fafafa", "#ff6101", "#2a2942", "#9694b0" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/power/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/power/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/power.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/power/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/power/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/power/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/power/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/power/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/power/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/power" }, "prompts": { "kit": "Use the Open Design design system \"power\" for my designs.", "claudeDesign": "Add the \"Power\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/power/project. Build a Design System artifact from them." } }, { "id": "premium", "title": "Premium", "summary": "Apple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language.", "tags": [ "premium", "minimal", "elegant", "brand", "consumer" ], "colors": [ "#faf8f4", "#1c1b19", "#a06a3b", "#ffffff", "#746d63" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/premium/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/premium/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/premium.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/premium/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/premium/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/premium/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/premium/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/premium/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/premium/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/premium" }, "prompts": { "kit": "Use the Open Design design system \"premium\" for my designs.", "claudeDesign": "Add the \"Premium\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/premium/project. Build a Design System artifact from them." } }, { "id": "professional", "title": "Professional", "summary": "Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.", "tags": [ "corporate", "enterprise", "brand" ], "colors": [ "#f5f8ff", "#111827", "#fece14", "#ffffff", "#667085" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/professional/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/professional/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/professional.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/professional/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/professional/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/professional/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/professional/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/professional/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/professional/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/professional" }, "prompts": { "kit": "Use the Open Design design system \"professional\" for my designs.", "claudeDesign": "Add the \"Professional\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/professional/project. Build a Design System artifact from them." } }, { "id": "publication", "title": "Publication", "summary": "Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.", "tags": [ "editorial", "artistic", "media" ], "colors": [ "#ffffff", "#0b0b0b", "#c1121f", "#f6f6f6", "#666666" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/publication/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/publication/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/publication.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/publication/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/publication/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/publication/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/publication/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/publication/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/publication/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/publication" }, "prompts": { "kit": "Use the Open Design design system \"publication\" for my designs.", "claudeDesign": "Add the \"Publication\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/publication/project. Build a Design System artifact from them." } }, { "id": "pulse", "title": "Pulse", "summary": "A dynamic, vibrant system built around thick borders and geometric shapes: warm peach canvas, punchy burnt-orange accent, expressive single-weight display type.", "tags": [ "bold", "warm", "playful", "brand", "creative" ], "colors": [ "#ffedd5", "#1a1207", "#ea580b", "#fdba74", "#8a5a2a" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/pulse/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/pulse/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/pulse.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/pulse/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/pulse/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/pulse/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/pulse/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/pulse/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/pulse/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/pulse" }, "prompts": { "kit": "Use the Open Design design system \"pulse\" for my designs.", "claudeDesign": "Add the \"Pulse\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/pulse/project. Build a Design System artifact from them." } }, { "id": "raycast", "title": "Raycast", "summary": "Productivity launcher. Sleek dark chrome, vibrant gradient accents.", "tags": [ "technical", "premium", "developer" ], "colors": [ "#07080a", "#f9f9f9", "#FF6363", "#101111", "#9c9c9d" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/raycast/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/raycast/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/raycast.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/raycast/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/raycast/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/raycast/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/raycast/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/raycast/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/raycast/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/raycast" }, "prompts": { "kit": "Use the Open Design design system \"raycast\" for my designs.", "claudeDesign": "Add the \"Raycast\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/raycast/project. Build a Design System artifact from them." } }, { "id": "reddit-ios", "title": "Reddit (iOS)", "summary": "Communities & discussion. Reddit Orange-Red #FF4500, upvote-orange #FF8717 / downvote #7193FF vote column, flat post cards, 10pt-per-level comment indentation", "tags": [ "friendly", "social" ], "colors": [ "#F6F7F8", "#1A1A1B", "#FF4500", "#FFFFFF", "#7C7C7C" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/reddit-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/reddit-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/reddit-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/reddit-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/reddit-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/reddit-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/reddit-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/reddit-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/reddit-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/reddit-ios" }, "prompts": { "kit": "Use the Open Design design system \"reddit-ios\" for my designs.", "claudeDesign": "Add the \"Reddit (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/reddit-ios/project. Build a Design System artifact from them." } }, { "id": "refined", "title": "Refined", "summary": "Carefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes.", "tags": [ "elegant", "minimal", "editorial", "brand" ], "colors": [ "#fbf6ee", "#201914", "#9b5b32", "#fffdf8", "#7a6d63" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/refined/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/refined/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/refined.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/refined/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/refined/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/refined/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/refined/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/refined/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/refined/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/refined" }, "prompts": { "kit": "Use the Open Design design system \"refined\" for my designs.", "claudeDesign": "Add the \"Refined\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/refined/project. Build a Design System artifact from them." } }, { "id": "renault", "title": "Renault", "summary": "French automotive. Vibrant aurora gradients, NouvelR typography, bold energy.", "tags": [ "bold", "futuristic", "automotive" ], "colors": [ "#f7f4ef", "#111111", "#ffcc33", "#ffffff", "#6f6b63" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/renault/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/renault/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/renault.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/renault/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/renault/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/renault/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/renault/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/renault/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/renault/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/renault" }, "prompts": { "kit": "Use the Open Design design system \"renault\" for my designs.", "claudeDesign": "Add the \"Renault\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/renault/project. Build a Design System artifact from them." } }, { "id": "replicate", "title": "Replicate", "summary": "Run ML models via API. Clean white canvas, code-forward.", "tags": [ "minimal", "technical", "ai", "developer" ], "colors": [ "#ffffff", "#202020", "#ea2804", "#f8f8f8", "#646464" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/replicate/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/replicate/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/replicate.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/replicate/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/replicate/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/replicate/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/replicate/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/replicate/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/replicate/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/replicate" }, "prompts": { "kit": "Use the Open Design design system \"replicate\" for my designs.", "claudeDesign": "Add the \"Replicate\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/replicate/project. Build a Design System artifact from them." } }, { "id": "resend", "title": "Resend", "summary": "Email API. Minimal dark theme, monospace accents.", "tags": [ "minimal", "technical", "developer" ], "colors": [ "#000000", "#f0f0f0", "#ff801f", "#5c5c5c" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/resend/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/resend/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/resend.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/resend/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/resend/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/resend/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/resend/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/resend/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/resend/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/resend" }, "prompts": { "kit": "Use the Open Design design system \"resend\" for my designs.", "claudeDesign": "Add the \"Resend\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/resend/project. Build a Design System artifact from them." } }, { "id": "resy-ios", "title": "Resy (iOS)", "summary": "Restaurant reservations. A black-first editorial system on a pure-black canvas #000000 where Playfair-style display-serif restaurant names contrast with clean …", "tags": [ "editorial", "premium", "romantic", "food" ], "colors": [ "#000000", "#F5F5F5", "#C73E3A", "#121212", "#9E9E9E" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/resy-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/resy-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/resy-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/resy-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/resy-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/resy-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/resy-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/resy-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/resy-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/resy-ios" }, "prompts": { "kit": "Use the Open Design design system \"resy-ios\" for my designs.", "claudeDesign": "Add the \"Resy (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/resy-ios/project. Build a Design System artifact from them." } }, { "id": "retro", "title": "Retro", "summary": "Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.", "tags": [ "retro", "bold", "brand", "creative" ], "colors": [ "#fff4cf", "#2a1810", "#d24b1f", "#fffaf0", "#8a6652" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/retro/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/retro/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/retro.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/retro/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/retro/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/retro/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/retro/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/retro/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/retro/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/retro" }, "prompts": { "kit": "Use the Open Design design system \"retro\" for my designs.", "claudeDesign": "Add the \"Retro\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/retro/project. Build a Design System artifact from them." } }, { "id": "revolut", "title": "Revolut", "summary": "Digital banking. Sleek dark interface, gradient cards, fintech precision.", "tags": [ "premium", "technical", "finance" ], "colors": [ "#f7f8fb", "#111827", "#0666eb", "#ffffff", "#64748b" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/revolut/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/revolut/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/revolut.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/revolut/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/revolut/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/revolut/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/revolut/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/revolut/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/revolut/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/revolut" }, "prompts": { "kit": "Use the Open Design design system \"revolut\" for my designs.", "claudeDesign": "Add the \"Revolut\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/revolut/project. Build a Design System artifact from them." } }, { "id": "riso", "title": "Riso", "summary": "A joyful two-color risograph print aesthetic: warm off-white paper, federal-blue heading ink, and a single fluorescent-pink accent reserved for actions.", "tags": [ "retro", "playful", "artistic", "creative", "editorial" ], "colors": [ "#f2eee1", "#2c3a8c", "#f0248f", "#fbf8ef", "#5b5f86" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/riso/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/riso/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/riso.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/riso/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/riso/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/riso/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/riso/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/riso/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/riso/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/riso" }, "prompts": { "kit": "Use the Open Design design system \"riso\" for my designs.", "claudeDesign": "Add the \"Riso\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/riso/project. Build a Design System artifact from them." } }, { "id": "roku", "title": "Roku", "summary": "A purple-themed app-dashboard aesthetic: glass-like panels, soft shadows, and rounded components on a light canvas, for developer-first product dashboards.", "tags": [ "friendly", "technical", "saas", "dashboard" ], "colors": [ "#f7f5fc", "#09090b", "#9333ea", "#ffffff", "#6b6478" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/roku/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/roku/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/roku.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/roku/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/roku/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/roku/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/roku/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/roku/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/roku/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/roku" }, "prompts": { "kit": "Use the Open Design design system \"roku\" for my designs.", "claudeDesign": "Add the \"Roku\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/roku/project. Build a Design System artifact from them." } }, { "id": "runwayml", "title": "Runway", "summary": "AI video generation. Cinematic dark UI, media-rich layout.", "tags": [ "premium", "artistic", "ai", "media" ], "colors": [ "#000000", "#ffffff", "#1a1a1a", "#767d88" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/runwayml/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/runwayml/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/runwayml.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/runwayml/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/runwayml/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/runwayml/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/runwayml/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/runwayml/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/runwayml/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/runwayml" }, "prompts": { "kit": "Use the Open Design design system \"runwayml\" for my designs.", "claudeDesign": "Add the \"Runway\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/runwayml/project. Build a Design System artifact from them." } }, { "id": "sanity", "title": "Sanity", "summary": "Headless CMS. Red accent, content-first editorial layout.", "tags": [ "editorial", "technical", "developer" ], "colors": [ "#f8f8f7", "#171717", "#f03e2f", "#ffffff", "#71717a" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/sanity/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/sanity/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/sanity.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/sanity/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/sanity/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/sanity/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/sanity/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/sanity/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/sanity/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/sanity" }, "prompts": { "kit": "Use the Open Design design system \"sanity\" for my designs.", "claudeDesign": "Add the \"Sanity\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/sanity/project. Build a Design System artifact from them." } }, { "id": "sega", "title": "Sega", "summary": "An arcade-inspired game interface: vivid royal-blue canvas, pixel-mono display type, white cabinet panels with a hard offset shadow, and a bright-yellow accent.", "tags": [ "retro", "playful", "bold", "gaming" ], "colors": [ "#4502ff", "#111827", "#ffda14", "#ffffff", "#5b6472" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/sega/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/sega/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/sega.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/sega/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/sega/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/sega/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/sega/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/sega/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/sega/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/sega" }, "prompts": { "kit": "Use the Open Design design system \"sega\" for my designs.", "claudeDesign": "Add the \"Sega\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/sega/project. Build a Design System artifact from them." } }, { "id": "sentry", "title": "Sentry", "summary": "Error monitoring. Dark dashboard, data-dense, pink-purple accent.", "tags": [ "technical", "developer", "dashboard" ], "colors": [ "#1f1633", "#ffffff", "#6a5fc1", "#150f23", "#9d96b3" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/sentry/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/sentry/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/sentry.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/sentry/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/sentry/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/sentry/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/sentry/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/sentry/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/sentry/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/sentry" }, "prompts": { "kit": "Use the Open Design design system \"sentry\" for my designs.", "claudeDesign": "Add the \"Sentry\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/sentry/project. Build a Design System artifact from them." } }, { "id": "shadcn", "title": "Shadcn", "summary": "Shadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns.", "tags": [ "minimal", "technical", "saas", "developer" ], "colors": [ "#ffffff", "#111827", "#000000", "#64748b" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/shadcn/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/shadcn/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/shadcn.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/shadcn/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/shadcn/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/shadcn/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/shadcn/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/shadcn/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/shadcn/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/shadcn" }, "prompts": { "kit": "Use the Open Design design system \"shadcn\" for my designs.", "claudeDesign": "Add the \"Shadcn\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/shadcn/project. Build a Design System artifact from them." } }, { "id": "shopify", "title": "Shopify", "summary": "E-commerce platform. Dark-first cinematic, neon green accent, ultra-light type.", "tags": [ "bold", "premium", "commerce" ], "colors": [ "#000000", "#ffffff", "#36f4a4", "#02090a", "#a1a1aa" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/shopify/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/shopify/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/shopify.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/shopify/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/shopify/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/shopify/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/shopify/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/shopify/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/shopify/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/shopify" }, "prompts": { "kit": "Use the Open Design design system \"shopify\" for my designs.", "claudeDesign": "Add the \"Shopify\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/shopify/project. Build a Design System artifact from them." } }, { "id": "signal-ios", "title": "Signal (iOS)", "summary": "Privacy-first messaging. Single Signal Blue #3A76F0 accent, disappearing-message timer chips, sealed-sender glyphs, zero-vanity minimalism, light + #1B1B1B dark", "tags": [ "minimal", "calm", "social" ], "colors": [ "#FFFFFF", "#000000", "#3A76F0", "#F5F5F5", "#6B6B6B" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/signal-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/signal-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/signal-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/signal-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/signal-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/signal-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/signal-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/signal-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/signal-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/signal-ios" }, "prompts": { "kit": "Use the Open Design design system \"signal-ios\" for my designs.", "claudeDesign": "Add the \"Signal (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/signal-ios/project. Build a Design System artifact from them." } }, { "id": "simple", "title": "Simple", "summary": "Straightforward, no-frills design with clean typography, neutral colors, and intuitive layouts that stay out of the way.", "tags": [ "minimal", "calm", "saas", "consumer" ], "colors": [ "#f5f8ff", "#111827", "#3b82f6", "#ffffff", "#667085" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/simple/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/simple/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/simple.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/simple/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/simple/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/simple/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/simple/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/simple/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/simple/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/simple" }, "prompts": { "kit": "Use the Open Design design system \"simple\" for my designs.", "claudeDesign": "Add the \"Simple\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/simple/project. Build a Design System artifact from them." } }, { "id": "sketch", "title": "Sketch", "summary": "A hand-drawn notebook-page aesthetic: warm cream paper, handwritten headlines, dashed strokes for every border, and a single soft-teal accent.", "tags": [ "playful", "warm", "artistic", "education", "creative" ], "colors": [ "#fbf3e6", "#2a2420", "#1dad97", "#fffefa", "#7a7268" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/sketch/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/sketch/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/sketch.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/sketch/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/sketch/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/sketch/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/sketch/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/sketch/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/sketch/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/sketch" }, "prompts": { "kit": "Use the Open Design design system \"sketch\" for my designs.", "claudeDesign": "Add the \"Sketch\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/sketch/project. Build a Design System artifact from them." } }, { "id": "skeumorphism", "title": "Skeumorphism", "summary": "Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces.", "tags": [ "retro", "warm", "consumer" ], "colors": [ "#f7eee6", "#2b211c", "#b46a46", "#fff8f1", "#8a7a70" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/skeumorphism/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/skeumorphism/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/skeumorphism.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/skeumorphism/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/skeumorphism/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/skeumorphism/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/skeumorphism/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/skeumorphism/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/skeumorphism/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/skeumorphism" }, "prompts": { "kit": "Use the Open Design design system \"skeumorphism\" for my designs.", "claudeDesign": "Add the \"Skeumorphism\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/skeumorphism/project. Build a Design System artifact from them." } }, { "id": "slack", "title": "Slack", "summary": "Workplace communication platform. Aubergine-primary, multi-accent logo palette, light surfaces with dark sidebar, warm and approachable.", "tags": [ "friendly", "warm", "saas" ], "colors": [ "#ffffff", "#1d1c1d", "#4a154b", "#f8f8f8", "#616061" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/slack/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/slack/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/slack.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/slack/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/slack/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/slack/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/slack/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/slack/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/slack/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/slack" }, "prompts": { "kit": "Use the Open Design design system \"slack\" for my designs.", "claudeDesign": "Add the \"Slack\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/slack/project. Build a Design System artifact from them." } }, { "id": "sleek", "title": "Sleek", "summary": "Modern minimalist aesthetic with clean lines, intentional color palette, subtle interactions, and consistent spacing.", "tags": [ "minimal", "premium", "saas", "brand" ], "colors": [ "#090b12", "#f8fafc", "#60a5fa", "#121722", "#94a3b8" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/sleek/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/sleek/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/sleek.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/sleek/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/sleek/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/sleek/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/sleek/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/sleek/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/sleek/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/sleek" }, "prompts": { "kit": "Use the Open Design design system \"sleek\" for my designs.", "claudeDesign": "Add the \"Sleek\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/sleek/project. Build a Design System artifact from them." } }, { "id": "snapchat-ios", "title": "Snapchat (iOS)", "summary": "Camera-first social. Snap Yellow #FFFC00, 5-screen swipe nav, 82pt yellow capture button, color-coded snap types, Avenir Next", "tags": [ "playful", "bold", "social" ], "colors": [ "#000000", "#FFFFFF", "#FFFC00", "#1A1A1A", "#8A8A8F" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/snapchat-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/snapchat-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/snapchat-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/snapchat-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/snapchat-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/snapchat-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/snapchat-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/snapchat-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/snapchat-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/snapchat-ios" }, "prompts": { "kit": "Use the Open Design design system \"snapchat-ios\" for my designs.", "claudeDesign": "Add the \"Snapchat (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/snapchat-ios/project. Build a Design System artifact from them." } }, { "id": "spacex", "title": "SpaceX", "summary": "Space technology. Stark black and white, full-bleed imagery, futuristic.", "tags": [ "futuristic", "bold", "minimal", "brand" ], "colors": [ "#000000", "#f0f0fa", "rgba(240, 240, 250, 0.7)" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/spacex/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/spacex/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/spacex.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/spacex/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/spacex/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/spacex/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/spacex/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/spacex/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/spacex/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/spacex" }, "prompts": { "kit": "Use the Open Design design system \"spacex\" for my designs.", "claudeDesign": "Add the \"SpaceX\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/spacex/project. Build a Design System artifact from them." } }, { "id": "spacious", "title": "Spacious", "summary": "Generous whitespace, consistent padding, and grid-based layouts for clean, readable, and breathing interfaces.", "tags": [ "minimal", "calm", "saas", "brand" ], "colors": [ "#faf3df", "#211b12", "#8f5d24", "#fffaf0", "#7c7160" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/spacious/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/spacious/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/spacious.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/spacious/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/spacious/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/spacious/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/spacious/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/spacious/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/spacious/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/spacious" }, "prompts": { "kit": "Use the Open Design design system \"spacious\" for my designs.", "claudeDesign": "Add the \"Spacious\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/spacious/project. Build a Design System artifact from them." } }, { "id": "spotify", "title": "Spotify", "summary": "Music streaming. Vibrant green on dark, bold type, album-art-driven.", "tags": [ "bold", "media" ], "colors": [ "#121212", "#ffffff", "#1ed760", "#181818", "#b3b3b3" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/spotify/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/spotify/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/spotify.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/spotify/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/spotify/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/spotify/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/spotify/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/spotify/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/spotify/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/spotify" }, "prompts": { "kit": "Use the Open Design design system \"spotify\" for my designs.", "claudeDesign": "Add the \"Spotify\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/spotify/project. Build a Design System artifact from them." } }, { "id": "spotify-ios", "title": "Spotify (iOS)", "summary": "Music streaming. Dark #121212 canvas, Spotify Green #1DB954 as the single accent, album-art-driven Now Playing gradient via dynamic color extraction", "tags": [ "bold", "media" ], "colors": [ "#121212", "#FFFFFF", "#1DB954", "#181818", "#B3B3B3" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/spotify-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/spotify-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/spotify-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/spotify-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/spotify-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/spotify-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/spotify-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/spotify-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/spotify-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/spotify-ios" }, "prompts": { "kit": "Use the Open Design design system \"spotify-ios\" for my designs.", "claudeDesign": "Add the \"Spotify (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/spotify-ios/project. Build a Design System artifact from them." } }, { "id": "square", "title": "Square", "summary": "A graceful, refined aesthetic: bright white canvas, visible thin borders, delicate geometric typography, and a single warm-peach accent.", "tags": [ "elegant", "minimal", "warm", "brand", "commerce" ], "colors": [ "#ffffff", "#141414", "#f0965e", "#6b7280" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/square/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/square/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/square.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/square/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/square/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/square/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/square/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/square/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/square/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/square" }, "prompts": { "kit": "Use the Open Design design system \"square\" for my designs.", "claudeDesign": "Add the \"Square\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/square/project. Build a Design System artifact from them." } }, { "id": "starbucks", "title": "Starbucks", "summary": "Global coffee retail brand. Four-tier green system, warm cream canvas, full-pill buttons.", "tags": [ "warm", "friendly", "food", "commerce" ], "colors": [ "#f2f0eb", "rgba(0, 0, 0, 0.87)", "#00754A", "#ffffff", "rgba(0, 0, 0, 0.58)" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/starbucks/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/starbucks/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/starbucks.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/starbucks/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/starbucks/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/starbucks/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/starbucks/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/starbucks/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/starbucks/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/starbucks" }, "prompts": { "kit": "Use the Open Design design system \"starbucks\" for my designs.", "claudeDesign": "Add the \"Starbucks\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/starbucks/project. Build a Design System artifact from them." } }, { "id": "stitch", "title": "Stitch", "summary": "A clean, high-contrast enterprise system for data-driven workflows: warm cream canvas, deep forest-green ink/accent, and a refined serif headline face.", "tags": [ "corporate", "warm", "elegant", "enterprise", "dashboard" ], "colors": [ "#edeade", "#1c1b17", "#0f2e20", "#f6f4ea", "#6e6a5c" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/stitch/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/stitch/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/stitch.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/stitch/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/stitch/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/stitch/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/stitch/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/stitch/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/stitch/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/stitch" }, "prompts": { "kit": "Use the Open Design design system \"stitch\" for my designs.", "claudeDesign": "Add the \"Stitch\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/stitch/project. Build a Design System artifact from them." } }, { "id": "storytelling", "title": "Storytelling", "summary": "Narrative-driven design using visuals, copy, and interaction to guide users through engaging, emotionally resonant journeys.", "tags": [ "artistic", "editorial", "brand", "media" ], "colors": [ "#fbf6ee", "#201914", "#9b5b32", "#fffdf8", "#7a6d63" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/storytelling/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/storytelling/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/storytelling.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/storytelling/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/storytelling/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/storytelling/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/storytelling/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/storytelling/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/storytelling/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/storytelling" }, "prompts": { "kit": "Use the Open Design design system \"storytelling\" for my designs.", "claudeDesign": "Add the \"Storytelling\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/storytelling/project. Build a Design System artifact from them." } }, { "id": "strava-ios", "title": "Strava (iOS)", "summary": "Activity tracking + social. Strava Orange #FC4C02 as the single accent, 4pt route polyline with halo, 3-up DISTANCE/TIME/PACE grid, tabular numerals everywhere…", "tags": [ "bold", "technical", "wellness", "social" ], "colors": [ "#FFFFFF", "#0E0E0E", "#FC4C02", "#F5F4F2", "#666666" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/strava-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/strava-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/strava-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/strava-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/strava-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/strava-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/strava-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/strava-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/strava-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/strava-ios" }, "prompts": { "kit": "Use the Open Design design system \"strava-ios\" for my designs.", "claudeDesign": "Add the \"Strava (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/strava-ios/project. Build a Design System artifact from them." } }, { "id": "stripe", "title": "Stripe", "summary": "Payment infrastructure. Signature purple gradients, weight-300 elegance.", "tags": [ "premium", "elegant", "technical", "finance", "saas" ], "colors": [ "#ffffff", "#061b31", "#533afd", "#64748d" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/stripe/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/stripe/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/stripe.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/stripe/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/stripe/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/stripe/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/stripe/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/stripe/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/stripe/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/stripe" }, "prompts": { "kit": "Use the Open Design design system \"stripe\" for my designs.", "claudeDesign": "Add the \"Stripe\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/stripe/project. Build a Design System artifact from them." } }, { "id": "supabase", "title": "Supabase", "summary": "Open-source Firebase alternative. Dark emerald theme, code-first.", "tags": [ "technical", "developer" ], "colors": [ "#171717", "#fafafa", "#3ecf8e", "#1c1c1c", "#898989" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/supabase/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/supabase/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/supabase.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/supabase/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/supabase/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/supabase/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/supabase/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/supabase/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/supabase/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/supabase" }, "prompts": { "kit": "Use the Open Design design system \"supabase\" for my designs.", "claudeDesign": "Add the \"Supabase\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/supabase/project. Build a Design System artifact from them." } }, { "id": "superhuman", "title": "Superhuman", "summary": "Fast email client. Premium dark UI, keyboard-first, purple glow.", "tags": [ "premium", "technical", "saas" ], "colors": [ "#ffffff", "#292827", "#cbb7fb", "#6f6c69" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/superhuman/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/superhuman/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/superhuman.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/superhuman/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/superhuman/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/superhuman/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/superhuman/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/superhuman/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/superhuman/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/superhuman" }, "prompts": { "kit": "Use the Open Design design system \"superhuman\" for my designs.", "claudeDesign": "Add the \"Superhuman\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/superhuman/project. Build a Design System artifact from them." } }, { "id": "telegram-ios", "title": "Telegram (iOS)", "summary": "Fast, themeable chat. Telegram Blue #0088CC, 17pt bubbles with 6pt notch tails, silent-send long-press, Lottie animated emoji, floating voice mini-player", "tags": [ "friendly", "social" ], "colors": [ "#212121", "#FFFFFF", "#0088CC", "#1C1C1C", "#8D8E93" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/telegram-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/telegram-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/telegram-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/telegram-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/telegram-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/telegram-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/telegram-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/telegram-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/telegram-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/telegram-ios" }, "prompts": { "kit": "Use the Open Design design system \"telegram-ios\" for my designs.", "claudeDesign": "Add the \"Telegram (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/telegram-ios/project. Build a Design System artifact from them." } }, { "id": "terracotta", "title": "Terracotta", "summary": "A sun-baked, clay-toned editorial system: warm cream and tan surfaces, a confident serif headline face, and a single burnt-terracotta accent.", "tags": [ "warm", "editorial", "brand", "food" ], "colors": [ "#f7eee0", "#241c15", "#bd5b34", "#efe3d0", "#7a6f62" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/terracotta/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/terracotta/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/terracotta.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/terracotta/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/terracotta/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/terracotta/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/terracotta/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/terracotta/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/terracotta/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/terracotta" }, "prompts": { "kit": "Use the Open Design design system \"terracotta\" for my designs.", "claudeDesign": "Add the \"Terracotta\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/terracotta/project. Build a Design System artifact from them." } }, { "id": "tesla", "title": "Tesla", "summary": "Electric automotive. Radical subtraction, full-viewport photography, near-zero UI.", "tags": [ "minimal", "premium", "futuristic", "automotive" ], "colors": [ "#ffffff", "#171a20", "#3e6ae1", "#f4f4f4", "#5c5e62" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/tesla/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/tesla/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/tesla.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/tesla/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/tesla/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/tesla/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/tesla/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/tesla/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/tesla/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/tesla" }, "prompts": { "kit": "Use the Open Design design system \"tesla\" for my designs.", "claudeDesign": "Add the \"Tesla\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/tesla/project. Build a Design System artifact from them." } }, { "id": "tetris", "title": "Tetris", "summary": "Classic block-game inspired design with playful colors, bold display fonts, and compact, high-energy layouts.", "tags": [ "retro", "playful", "gaming" ], "colors": [ "#050816", "#f8fafc", "#00f0f0", "#10162a", "#94a3b8" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/tetris/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/tetris/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/tetris.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/tetris/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/tetris/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/tetris/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/tetris/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/tetris/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/tetris/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/tetris" }, "prompts": { "kit": "Use the Open Design design system \"tetris\" for my designs.", "claudeDesign": "Add the \"Tetris\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/tetris/project. Build a Design System artifact from them." } }, { "id": "theverge", "title": "The Verge", "summary": "Tech editorial media. Acid-mint and ultraviolet accents, Manuka display, rave-flyer story tiles.", "tags": [ "bold", "editorial", "media" ], "colors": [ "#050505", "#ffffff", "#ff00a8", "#111111", "#9ca3af" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/theverge/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/theverge/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/theverge.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/theverge/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/theverge/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/theverge/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/theverge/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/theverge/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/theverge/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/theverge" }, "prompts": { "kit": "Use the Open Design design system \"theverge\" for my designs.", "claudeDesign": "Add the \"The Verge\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/theverge/project. Build a Design System artifact from them." } }, { "id": "things-3-ios", "title": "Things 3 (iOS)", "summary": "Serene tasks. Things Blue #4F97FF on pure-white, circular checkbox fill spring, the Magic-Plus, the #FFD60A Today star, generous calm whitespace", "tags": [ "calm", "minimal", "saas" ], "colors": [ "#FFFFFF", "#1D1D1F", "#4F97FF", "#F5F6F8", "#8A8A8E" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/things-3-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/things-3-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/things-3-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/things-3-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/things-3-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/things-3-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/things-3-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/things-3-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/things-3-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/things-3-ios" }, "prompts": { "kit": "Use the Open Design design system \"things-3-ios\" for my designs.", "claudeDesign": "Add the \"Things 3 (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/things-3-ios/project. Build a Design System artifact from them." } }, { "id": "todoist-ios", "title": "Todoist (iOS)", "summary": "Tasks + projects. Todoist Red #DC4C3E for FAB + P1 flag + brand, tinted-red FAB shadow, four-tier priority via checkbox stroke (P1 red, P2 #EB8909, P3 #246FE0,…", "tags": [ "friendly", "minimal", "saas" ], "colors": [ "#FFFFFF", "#202020", "#DC4C3E", "#FAFAFA", "#808080" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/todoist-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/todoist-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/todoist-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/todoist-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/todoist-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/todoist-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/todoist-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/todoist-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/todoist-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/todoist-ios" }, "prompts": { "kit": "Use the Open Design design system \"todoist-ios\" for my designs.", "claudeDesign": "Add the \"Todoist (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/todoist-ios/project. Build a Design System artifact from them." } }, { "id": "together-ai", "title": "Together AI", "summary": "Open-source AI infrastructure. Technical, blueprint-style design.", "tags": [ "technical", "ai" ], "colors": [ "#ffffff", "#000000", "#010120", "#666666" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/together-ai/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/together-ai/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/together-ai.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/together-ai/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/together-ai/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/together-ai/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/together-ai/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/together-ai/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/together-ai/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/together-ai" }, "prompts": { "kit": "Use the Open Design design system \"together-ai\" for my designs.", "claudeDesign": "Add the \"Together AI\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/together-ai/project. Build a Design System artifact from them." } }, { "id": "tom-modern", "title": "Tom Modern Design", "summary": "Editorial-technical design system. Neutral canvas, single vermillion accent, sharp corners, Geist typography, hard shadows, structured composition.", "tags": [ "editorial", "technical", "bold", "brand" ], "colors": [ "#fafafa", "#27272a", "#ff5a00", "#ffffff", "#71717a" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/tom-modern/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/tom-modern/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/tom-modern.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/tom-modern/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/tom-modern/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/tom-modern/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/tom-modern/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/tom-modern/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/tom-modern/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/tom-modern" }, "prompts": { "kit": "Use the Open Design design system \"tom-modern\" for my designs.", "claudeDesign": "Add the \"Tom Modern Design\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/tom-modern/project. Build a Design System artifact from them." } }, { "id": "totality-festival", "title": "Totality Festival", "summary": "Surface: web A cosmic-premium, glassmorphic dark system that captures the visceral awe of a solar eclipse — obsidian surfaces, amber \"corona\" highlights, and cyan atmospheric accents.", "tags": [ "bold", "futuristic", "artistic", "brand" ], "colors": [ "#070711", "#f8f7ff", "#c084fc", "#111126", "#9d8ad4" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/totality-festival/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/totality-festival/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/totality-festival.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/totality-festival/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/totality-festival/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/totality-festival/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/totality-festival/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/totality-festival/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/totality-festival/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/totality-festival" }, "prompts": { "kit": "Use the Open Design design system \"totality-festival\" for my designs.", "claudeDesign": "Add the \"Totality Festival\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/totality-festival/project. Build a Design System artifact from them." } }, { "id": "trading-terminal", "title": "Trading Terminal Design System", "summary": "Bloomberg-style financial trading terminal. Dark-only, data-dense, cyan/coral buy/sell signals. Everything readable at a glance from two meters away.", "tags": [ "technical", "finance", "dashboard" ], "colors": [ "#070b12", "#f8fafc", "#38bdf8", "#101826", "#8492a6" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/trading-terminal/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/trading-terminal/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/trading-terminal.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/trading-terminal/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/trading-terminal/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/trading-terminal/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/trading-terminal/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/trading-terminal/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/trading-terminal/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/trading-terminal" }, "prompts": { "kit": "Use the Open Design design system \"trading-terminal\" for my designs.", "claudeDesign": "Add the \"Trading Terminal Design System\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/trading-terminal/project. Build a Design System artifact from them." } }, { "id": "twitch-ios", "title": "Twitch (iOS)", "summary": "Live streaming. Twitch Purple #9146FF action + Live Red #EB0400 liveness-only, LIVE pills, docked chat column, theater overlay, emotes", "tags": [ "bold", "playful", "gaming", "media" ], "colors": [ "#0E0E10", "#EFEFF1", "#9146FF", "#18181B", "#ADADB8" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/twitch-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/twitch-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/twitch-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/twitch-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/twitch-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/twitch-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/twitch-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/twitch-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/twitch-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/twitch-ios" }, "prompts": { "kit": "Use the Open Design design system \"twitch-ios\" for my designs.", "claudeDesign": "Add the \"Twitch (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/twitch-ios/project. Build a Design System artifact from them." } }, { "id": "uber", "title": "Uber", "summary": "Mobility platform. Bold black and white, tight type, urban energy.", "tags": [ "bold", "minimal", "travel" ], "colors": [ "#ffffff", "#000000", "#4b4b4b" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/uber/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/uber/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/uber.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/uber/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/uber/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/uber/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/uber/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/uber/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/uber/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/uber" }, "prompts": { "kit": "Use the Open Design design system \"uber\" for my designs.", "claudeDesign": "Add the \"Uber\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/uber/project. Build a Design System artifact from them." } }, { "id": "uber-eats-ios", "title": "Uber Eats (iOS)", "summary": "Food delivery. Uber Eats Green #06C167, clean white canvas, photo-first restaurant cards, category pills, sticky cart bar, live map order tracking", "tags": [ "friendly", "food" ], "colors": [ "#FFFFFF", "#000000", "#06C167", "#F3F3F3", "#6B6B6B" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/uber-eats-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/uber-eats-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/uber-eats-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/uber-eats-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/uber-eats-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/uber-eats-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/uber-eats-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/uber-eats-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/uber-eats-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/uber-eats-ios" }, "prompts": { "kit": "Use the Open Design design system \"uber-eats-ios\" for my designs.", "claudeDesign": "Add the \"Uber Eats (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/uber-eats-ios/project. Build a Design System artifact from them." } }, { "id": "urdu", "title": "Urdu Modern (Indus Script System)", "summary": "Bundled OpenDesign package for Urdu Modern (Indus Script System), derived from curated DESIGN.md, tokens.css, and components.html fixtures.", "tags": [ "editorial", "elegant" ], "colors": [ "#f3faf4", "#15261a", "#1f8f46", "#ffffff", "#6b7d70" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/urdu/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/urdu/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/urdu.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/urdu/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/urdu/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/urdu/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/urdu/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/urdu/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/urdu/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/urdu" }, "prompts": { "kit": "Use the Open Design design system \"urdu\" for my designs.", "claudeDesign": "Add the \"Urdu Modern (Indus Script System)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/urdu/project. Build a Design System artifact from them." } }, { "id": "vercel", "title": "Vercel", "summary": "Frontend deployment. Black and white precision, Geist font.", "tags": [ "minimal", "technical", "developer" ], "colors": [ "#ffffff", "#171717", "#0070f3", "#666666" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/vercel/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/vercel/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/vercel.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/vercel/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/vercel/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/vercel/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/vercel/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/vercel/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/vercel/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/vercel" }, "prompts": { "kit": "Use the Open Design design system \"vercel\" for my designs.", "claudeDesign": "Add the \"Vercel\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/vercel/project. Build a Design System artifact from them." } }, { "id": "vibrant", "title": "Vibrant", "summary": "Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.", "tags": [ "bold", "playful", "warm", "consumer", "brand" ], "colors": [ "#fff8d7", "#1d1836", "#ff6b00", "#ffffff", "#796f91" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/vibrant/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/vibrant/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/vibrant.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/vibrant/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/vibrant/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/vibrant/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/vibrant/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/vibrant/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/vibrant/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/vibrant" }, "prompts": { "kit": "Use the Open Design design system \"vibrant\" for my designs.", "claudeDesign": "Add the \"Vibrant\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/vibrant/project. Build a Design System artifact from them." } }, { "id": "vintage", "title": "Vintage", "summary": "1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.", "tags": [ "retro", "warm", "brand", "creative" ], "colors": [ "#faf3df", "#211b12", "#8f5d24", "#fffaf0", "#7c7160" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/vintage/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/vintage/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/vintage.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/vintage/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/vintage/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/vintage/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/vintage/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/vintage/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/vintage/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/vintage" }, "prompts": { "kit": "Use the Open Design design system \"vintage\" for my designs.", "claudeDesign": "Add the \"Vintage\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/vintage/project. Build a Design System artifact from them." } }, { "id": "vodafone", "title": "Vodafone", "summary": "Global telecom brand. Monumental uppercase display, Vodafone Red chapter bands.", "tags": [ "bold", "corporate", "enterprise", "brand" ], "colors": [ "#ffffff", "#1f1f1f", "#e60000", "#f4f4f4", "#6f7375" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/vodafone/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/vodafone/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/vodafone.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/vodafone/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/vodafone/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/vodafone/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/vodafone/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/vodafone/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/vodafone/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/vodafone" }, "prompts": { "kit": "Use the Open Design design system \"vodafone\" for my designs.", "claudeDesign": "Add the \"Vodafone\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/vodafone/project. Build a Design System artifact from them." } }, { "id": "voltagent", "title": "VoltAgent", "summary": "AI agent framework. Void-black canvas, emerald accent, terminal-native.", "tags": [ "technical", "futuristic", "ai", "developer" ], "colors": [ "#07110c", "#f4fff8", "#7cff6b", "#101c16", "#8ba493" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/voltagent/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/voltagent/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/voltagent.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/voltagent/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/voltagent/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/voltagent/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/voltagent/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/voltagent/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/voltagent/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/voltagent" }, "prompts": { "kit": "Use the Open Design design system \"voltagent\" for my designs.", "claudeDesign": "Add the \"VoltAgent\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/voltagent/project. Build a Design System artifact from them." } }, { "id": "warm-editorial", "title": "Warm Editorial", "summary": "A serif-led magazine aesthetic. Terracotta accent on warm off-white paper — good for long-form, editorial, and brand-led marketing pages.", "tags": [ "warm", "editorial", "elegant", "brand" ], "colors": [ "#fbf6ee", "#201914", "#9b5b32", "#fffdf8", "#7a6d63" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/warm-editorial/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/warm-editorial/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/warm-editorial.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/warm-editorial/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/warm-editorial/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/warm-editorial/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/warm-editorial/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/warm-editorial/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/warm-editorial/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/warm-editorial" }, "prompts": { "kit": "Use the Open Design design system \"warm-editorial\" for my designs.", "claudeDesign": "Add the \"Warm Editorial\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/warm-editorial/project. Build a Design System artifact from them." } }, { "id": "warp", "title": "Warp", "summary": "Modern terminal. Dark IDE-like interface, block-based command UI.", "tags": [ "technical", "developer" ], "colors": [ "#161412", "#faf9f6", "#353534", "#1f1d1b", "#868584" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/warp/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/warp/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/warp.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/warp/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/warp/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/warp/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/warp/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/warp/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/warp/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/warp" }, "prompts": { "kit": "Use the Open Design design system \"warp\" for my designs.", "claudeDesign": "Add the \"Warp\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/warp/project. Build a Design System artifact from them." } }, { "id": "webex", "title": "Webex", "summary": "Collaboration platform. Momentum typography, blue action system, multi-user accent spectrum.", "tags": [ "corporate", "friendly", "enterprise", "saas" ], "colors": [ "#f6f8fb", "#0f172a", "#00a3a6", "#ffffff", "#64748b" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/webex/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/webex/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/webex.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/webex/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/webex/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/webex/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/webex/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/webex/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/webex/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/webex" }, "prompts": { "kit": "Use the Open Design design system \"webex\" for my designs.", "claudeDesign": "Add the \"Webex\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/webex/project. Build a Design System artifact from them." } }, { "id": "webflow", "title": "Webflow", "summary": "Visual web builder. Blue-accented, polished marketing site aesthetic.", "tags": [ "corporate", "friendly", "creative", "saas" ], "colors": [ "#ffffff", "#080808", "#146ef5", "#5a5a5a" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/webflow/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/webflow/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/webflow.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/webflow/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/webflow/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/webflow/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/webflow/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/webflow/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/webflow/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/webflow" }, "prompts": { "kit": "Use the Open Design design system \"webflow\" for my designs.", "claudeDesign": "Add the \"Webflow\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/webflow/project. Build a Design System artifact from them." } }, { "id": "wechat", "title": "WeChat Design System", "summary": "Brand visual language for WeChat Mini Programs, official accounts, and open ecosystem extensions.", "tags": [ "friendly", "social" ], "colors": [ "#ededed", "#1a1a1a", "#07c160", "#f7f7f7", "#888888" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/wechat/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/wechat/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/wechat.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/wechat/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/wechat/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/wechat/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/wechat/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/wechat/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/wechat/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/wechat" }, "prompts": { "kit": "Use the Open Design design system \"wechat\" for my designs.", "claudeDesign": "Add the \"WeChat Design System\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/wechat/project. Build a Design System artifact from them." } }, { "id": "whatsapp-ios", "title": "WhatsApp (iOS)", "summary": "Encrypted chat. WhatsApp Green #25D366, mint-leaf outgoing bubbles #D9FDD3, voice-message waveform, blue double-check read receipts", "tags": [ "friendly", "social" ], "colors": [ "#FFFFFF", "#111B21", "#25D366", "#F7F8FA", "#667781" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/whatsapp-ios/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/whatsapp-ios/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/whatsapp-ios.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/whatsapp-ios/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/whatsapp-ios/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/whatsapp-ios/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/whatsapp-ios/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/whatsapp-ios/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/whatsapp-ios/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/whatsapp-ios" }, "prompts": { "kit": "Use the Open Design design system \"whatsapp-ios\" for my designs.", "claudeDesign": "Add the \"WhatsApp (iOS)\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/whatsapp-ios/project. Build a Design System artifact from them." } }, { "id": "wired", "title": "WIRED", "summary": "Tech magazine. Paper-white broadsheet density, custom serif display, mono kickers, ink-blue links.", "tags": [ "editorial", "bold", "media" ], "colors": [ "#ffffff", "#000000", "#e10600", "#f2f2f2", "#666666" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/wired/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/wired/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/wired.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/wired/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/wired/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/wired/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/wired/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/wired/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/wired/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/wired" }, "prompts": { "kit": "Use the Open Design design system \"wired\" for my designs.", "claudeDesign": "Add the \"WIRED\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/wired/project. Build a Design System artifact from them." } }, { "id": "wise", "title": "Wise", "summary": "Money transfer. Bright green accent, friendly and clear.", "tags": [ "friendly", "finance" ], "colors": [ "#ffffff", "#0e0f0c", "#9fe870", "#e8ebe6", "#868685" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/wise/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/wise/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/wise.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/wise/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/wise/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/wise/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/wise/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/wise/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/wise/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/wise" }, "prompts": { "kit": "Use the Open Design design system \"wise\" for my designs.", "claudeDesign": "Add the \"Wise\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/wise/project. Build a Design System artifact from them." } }, { "id": "x-ai", "title": "xAI", "summary": "Elon Musk's AI lab. Stark monochrome, futuristic minimalism.", "tags": [ "minimal", "futuristic", "ai" ], "colors": [ "#1f2228", "#ffffff", "rgba(255, 255, 255, 0.03)", "rgba(255, 255, 255, 0.5)" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/x-ai/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/x-ai/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/x-ai.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/x-ai/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/x-ai/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/x-ai/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/x-ai/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/x-ai/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/x-ai/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/x-ai" }, "prompts": { "kit": "Use the Open Design design system \"x-ai\" for my designs.", "claudeDesign": "Add the \"xAI\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/x-ai/project. Build a Design System artifact from them." } }, { "id": "xiaohongshu", "title": "Xiaohongshu", "summary": "Lifestyle UGC social platform. Singular brand red, generous radius, content-first.", "tags": [ "friendly", "warm", "social", "consumer" ], "colors": [ "#f5f5f5", "rgba(0, 0, 0, 0.8)", "#ff2442", "#ffffff", "rgba(0, 0, 0, 0.45)" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/xiaohongshu/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/xiaohongshu/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/xiaohongshu.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/xiaohongshu/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/xiaohongshu/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/xiaohongshu/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/xiaohongshu/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/xiaohongshu/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/xiaohongshu/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/xiaohongshu" }, "prompts": { "kit": "Use the Open Design design system \"xiaohongshu\" for my designs.", "claudeDesign": "Add the \"Xiaohongshu\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/xiaohongshu/project. Build a Design System artifact from them." } }, { "id": "zapier", "title": "Zapier", "summary": "Automation platform. Warm orange, friendly illustration-driven.", "tags": [ "friendly", "warm", "saas" ], "colors": [ "#fff7ed", "#2d2a26", "#ff4f00", "#ffffff", "#7c6f64" ], "url": "https://feimacode.github.io/open-design-agent-kit/design-systems/zapier/", "claudeDesignUrl": "https://feimacode.github.io/open-design-agent-kit/design-systems/zapier/#claude", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/design-systems/thumbs/zapier.webp", "files": { "kit": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/zapier/kit/DESIGN.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/zapier/kit/tokens.css" ], "claudeDesign": [ "https://feimacode.github.io/open-design-agent-kit/design-systems/zapier/claude/README.md", "https://feimacode.github.io/open-design-agent-kit/design-systems/zapier/claude/components/Cover/preview.html", "https://feimacode.github.io/open-design-agent-kit/design-systems/zapier/claude/design-system.json", "https://feimacode.github.io/open-design-agent-kit/design-systems/zapier/claude/tokens.json" ], "claudeDesignFolder": "https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/zapier" }, "prompts": { "kit": "Use the Open Design design system \"zapier\" for my designs.", "claudeDesign": "Add the \"Zapier\" design system to my Claude design systems. Its files, already in Claude's Design System format, are in https://github.com/feimacode/open-design-agent-kit/tree/main/claude-design-systems/zapier/project. Build a Design System artifact from them." } } ], "examples": [ { "id": "od:audio:audio-jingle:example", "slug": "audio-jingle", "title": "Audio jingle", "summary": "Audio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output i…", "tags": [ "audio" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/audio-jingle/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/audio-jingle/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/audio-jingle.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/audio-jingle/example.html", "prompts": { "remix": "Remix the Open Design example od:audio:audio-jingle:example.", "brief": "A 30-second upbeat indie-pop jingle for a coffee shop launch — warm\nelectric piano lead, brushed drums, gentle bass, a single sun-soaked\n\"ahhh\" choir on the chorus. No vocals. Loop-friendly tail." } }, { "id": "od:deck:fs-editorial-forest", "slug": "fs-editorial-forest", "title": "Art-Direct an Annual Report like a Magazine Creative Director", "summary": "Art-directing a fashion house's annual report — the editorial system, the photography rhythm, and the data spreads. Built as a decision-grade design craft deck for brand stakeholders, exec audience.", "tags": [ "deck", "design craft" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/fs-editorial-forest/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/fs-editorial-forest/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/fs-editorial-forest.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/fs-editorial-forest/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:fs-editorial-forest.", "brief": "Create \"Art-Direct an Annual Report like a Magazine Creative Director\" as a decision-grade Design craft deck in this template's own visual system. Subject: Art-directing a fashion house's annual report — the editorial system, the photography rhythm, and the data spreads. Audience: brand stakeholders, exec audience. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck feel authored by a senior designer rather than generated." } }, { "id": "od:deck:html-ppt-testing-safety-alert:example", "slug": "html-ppt-testing-safety-alert", "title": "Brief a Health-System Board on Data Governance like a Chief Compliance Officer", "summary": "A hospital data-governance briefing: patient-data risk, the control framework, accountability, and the approval the board must give. Built as a decision-grade policy briefing deck for health-system board, regulators.", "tags": [ "deck", "government policy" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-testing-safety-alert/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-testing-safety-alert/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-testing-safety-alert.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-testing-safety-alert/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-testing-safety-alert:example.", "brief": "Create \"Brief a Health-System Board on Data Governance like a Chief Compliance Officer\" as a decision-grade Government & policy deck in this template's own visual system. Subject: A hospital data-governance briefing: patient-data risk, the control framework, accountability, and the approval the board must give. Audience: health-system board, regulators. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck reduce approval risk rather than create rhetorical heat." } }, { "id": "od:deck:huashu-takram-soft-tech", "slug": "huashu-takram-soft-tech", "title": "Build a Buyer-Committee Leave-Behind like an Enterprise Sales Lead", "summary": "OpenDesign procurement & security leave-behind: the one-pager-plus a buying committee can forward and approve internally. Built as a decision-grade B2B sales deck for buying committee, security, procurement.", "tags": [ "deck", "b2b sales" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-takram-soft-tech/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-takram-soft-tech/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/huashu-takram-soft-tech.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/huashu-takram-soft-tech/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:huashu-takram-soft-tech.", "brief": "Create \"Build a Buyer-Committee Leave-Behind like an Enterprise Sales Lead\" as a decision-grade B2B sales deck in this template's own visual system. Subject: OpenDesign procurement & security leave-behind: the one-pager-plus a buying committee can forward and approve internally. Audience: buying committee, security, procurement. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can the champion forward this internally without rewriting it." } }, { "id": "od:deck:html-ppt-zhangzara-neo-grid-bold:example", "slug": "html-ppt-zhangzara-neo-grid-bold", "title": "Build a Designer Portfolio Narrative like a Hiring Bar-Raiser", "summary": "A designer's portfolio narrative for a senior interview — three case studies, the craft, and the judgment behind each. Built as a decision-grade career deck for hiring panel.", "tags": [ "deck", "career" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-neo-grid-bold/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-neo-grid-bold/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-neo-grid-bold.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-neo-grid-bold/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-neo-grid-bold:example.", "brief": "Create \"Build a Designer Portfolio Narrative like a Hiring Bar-Raiser\" as a decision-grade Career deck in this template's own visual system. Subject: A designer's portfolio narrative for a senior interview — three case studies, the craft, and the judgment behind each. Audience: hiring panel. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the evidence make the claim feel earned." } }, { "id": "od:deck:html-ppt-course-module:example", "slug": "html-ppt-course-module", "title": "Build a New-Hire Onboarding Module like a Top Enablement Lead", "summary": "A first-30-days onboarding module for new hospitality hires — the behaviors, the practice, the checks, and the manager follow-up. Built as a decision-grade professional training deck for new hires, managers.", "tags": [ "deck", "professional training" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-course-module/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-course-module/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-course-module.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-course-module/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-course-module:example.", "brief": "Create \"Build a New-Hire Onboarding Module like a Top Enablement Lead\" as a decision-grade Professional training deck in this template's own visual system. Subject: A first-30-days onboarding module for new hospitality hires — the behaviors, the practice, the checks, and the manager follow-up. Audience: new hires, managers. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can a learner perform the target task the next day." } }, { "id": "od:deck:huashu-pentagram-grid", "slug": "huashu-pentagram-grid", "title": "Build a Positioning & Messaging System like a Brand Strategist", "summary": "OpenDesign's positioning & messaging system: the one-line promise, the pillars, and the proof — the source of truth for all copy. Built as a decision-grade marketing & GTM deck for brand & marketing team.", "tags": [ "deck", "marketing gtm" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-pentagram-grid/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-pentagram-grid/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/huashu-pentagram-grid.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/huashu-pentagram-grid/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:huashu-pentagram-grid.", "brief": "Create \"Build a Positioning & Messaging System like a Brand Strategist\" as a decision-grade Marketing & GTM deck in this template's own visual system. Subject: OpenDesign's positioning & messaging system: the one-line promise, the pillars, and the proof — the source of truth for all copy. Audience: brand & marketing team. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can the plan connect creative choices to measurable growth." } }, { "id": "od:deck:html-ppt-zhangzara-studio:example", "slug": "html-ppt-zhangzara-studio", "title": "Build a Studio Portfolio & Rate Deck like a Creative Studio Owner", "summary": "A photography studio's portfolio-and-rate deck — the signature work, the process, and the packages that win the brief. Built as a decision-grade design craft deck for prospective clients.", "tags": [ "deck", "design craft" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-studio/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-studio/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-studio.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-studio/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-studio:example.", "brief": "Create \"Build a Studio Portfolio & Rate Deck like a Creative Studio Owner\" as a decision-grade Design craft deck in this template's own visual system. Subject: A photography studio's portfolio-and-rate deck — the signature work, the process, and the packages that win the brief. Audience: prospective clients. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck feel authored by a senior designer rather than generated." } }, { "id": "od:deck:html-ppt-zhangzara-editorial-tri-tone:example", "slug": "html-ppt-zhangzara-editorial-tri-tone", "title": "Build an Editorial Design System like a Magazine Art Director", "summary": "A type-and-color system for a culture magazine relaunch — the grid, the tri-tone palette, and the layout kit. Built as a decision-grade design craft deck for editorial & design team.", "tags": [ "deck", "design craft" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-editorial-tri-tone/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-editorial-tri-tone/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-editorial-tri-tone.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-editorial-tri-tone/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-editorial-tri-tone:example.", "brief": "Create \"Build an Editorial Design System like a Magazine Art Director\" as a decision-grade Design craft deck in this template's own visual system. Subject: A type-and-color system for a culture magazine relaunch — the grid, the tri-tone palette, and the layout kit. Audience: editorial & design team. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck feel authored by a senior designer rather than generated." } }, { "id": "od:deck:html-ppt-zhangzara-biennale-yellow:example", "slug": "html-ppt-zhangzara-biennale-yellow", "title": "Curate an Art Biennale Deck like a Museum Exhibition Director", "summary": "A curatorial deck for a contemporary art biennale — the thesis, the rooms, the works, and the visitor journey. Built as a decision-grade design craft deck for museum board, curators.", "tags": [ "deck", "design craft" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-biennale-yellow/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-biennale-yellow/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-biennale-yellow.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-biennale-yellow/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-biennale-yellow:example.", "brief": "Create \"Curate an Art Biennale Deck like a Museum Exhibition Director\" as a decision-grade Design craft deck in this template's own visual system. Subject: A curatorial deck for a contemporary art biennale — the thesis, the rooms, the works, and the visitor journey. Audience: museum board, curators. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck feel authored by a senior designer rather than generated." } }, { "id": "od:deck:fs-notebook-tabs", "slug": "fs-notebook-tabs", "title": "Defend a CS Capstone like a Top Thesis Advisor", "summary": "A computer-science capstone: an on-device ML keyboard that predicts next words privately — problem, method, evaluation, and defense answers. Built as a decision-grade coursework defense deck for professor, defense commi…", "tags": [ "deck", "student coursework" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/fs-notebook-tabs/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/fs-notebook-tabs/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/fs-notebook-tabs.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/fs-notebook-tabs/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:fs-notebook-tabs.", "brief": "Create \"Defend a CS Capstone like a Top Thesis Advisor\" as a decision-grade Student coursework deck in this template's own visual system. Subject: A computer-science capstone: an on-device ML keyboard that predicts next words privately — problem, method, evaluation, and defense answers. Audience: professor, defense committee. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can a reviewer find the contribution, evidence, and limitation in under 90 seconds." } }, { "id": "od:deck:html-ppt-zhangzara-soft-editorial:example", "slug": "html-ppt-zhangzara-soft-editorial", "title": "Deliver a Digital-Transformation Roadmap like a Big-Four Partner", "summary": "A digital-transformation roadmap for a legacy insurer — the diagnosis, the sequenced bets, and the operating rhythm to land them. Built as a decision-grade consulting deck for client executives.", "tags": [ "deck", "consulting" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-soft-editorial/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-soft-editorial/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-soft-editorial.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-soft-editorial/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-soft-editorial:example.", "brief": "Create \"Deliver a Digital-Transformation Roadmap like a Big-Four Partner\" as a decision-grade Consulting deck in this template's own visual system. Subject: A digital-transformation roadmap for a legacy insurer — the diagnosis, the sequenced bets, and the operating rhythm to land them. Audience: client executives. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would a client know what to do Monday morning." } }, { "id": "od:deck:html-ppt-zhangzara-vellum:example", "slug": "html-ppt-zhangzara-vellum", "title": "Deliver a Humanities Research Lecture like a Tenured Art Historian", "summary": "A humanities lecture: how Renaissance linear perspective reshaped early cartography — sources, argument, and evidence. Built as a decision-grade academic research deck for faculty, graduate seminar.", "tags": [ "deck", "academic research" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-vellum/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-vellum/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-vellum.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-vellum/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-vellum:example.", "brief": "Create \"Deliver a Humanities Research Lecture like a Tenured Art Historian\" as a decision-grade Academic research deck in this template's own visual system. Subject: A humanities lecture: how Renaissance linear perspective reshaped early cartography — sources, argument, and evidence. Audience: faculty, graduate seminar. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck prove novelty without overclaiming." } }, { "id": "od:deck:html-ppt-zhangzara-retro-windows:example", "slug": "html-ppt-zhangzara-retro-windows", "title": "Deliver a Security-Awareness Training like a CISO Enablement Team", "summary": "An IT security-awareness training on spotting phishing — the tells, the drill, and what to do in the first 60 seconds. Built as a decision-grade professional training deck for all employees.", "tags": [ "deck", "professional training" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-retro-windows/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-retro-windows/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-retro-windows.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-retro-windows/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-retro-windows:example.", "brief": "Create \"Deliver a Security-Awareness Training like a CISO Enablement Team\" as a decision-grade Professional training deck in this template's own visual system. Subject: An IT security-awareness training on spotting phishing — the tells, the drill, and what to do in the first 60 seconds. Audience: all employees. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can a learner perform the target task the next day." } }, { "id": "od:deck:html-ppt-tech-sharing:example", "slug": "html-ppt-tech-sharing", "title": "Give an Engineering Tech Talk like a Staff Developer-Advocate", "summary": "OpenDesign internals: how the agent stream, sandbox, and artifacts work — an engineering deep-dive talk. Built as a decision-grade AI literacy deck for engineers, dev community.", "tags": [ "deck", "ai literacy" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-tech-sharing/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-tech-sharing/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-tech-sharing.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-tech-sharing/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-tech-sharing:example.", "brief": "Create \"Give an Engineering Tech Talk like a Staff Developer-Advocate\" as a decision-grade AI literacy deck in this template's own visual system. Subject: OpenDesign internals: how the agent stream, sandbox, and artifacts work — an engineering deep-dive talk. Audience: engineers, dev community. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck make AI implementation concrete enough to fund." } }, { "id": "od:deck:html-ppt-zhangzara-retro-zine:example", "slug": "html-ppt-zhangzara-retro-zine", "title": "Make a Neighborhood Zine Story like an Indie Photo Editor", "summary": "A neighborhood zine on the disappearing corner shops — portraits, voices, and what a block loses when they close. Built as a decision-grade story deck for community, local readers.", "tags": [ "deck", "life" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-retro-zine/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-retro-zine/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-retro-zine.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-retro-zine/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-retro-zine:example.", "brief": "Create \"Make a Neighborhood Zine Story like an Indie Photo Editor\" as a decision-grade Life & story deck in this template's own visual system. Subject: A neighborhood zine on the disappearing corner shops — portraits, voices, and what a block loses when they close. Audience: community, local readers. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would someone retell the story after seeing it once." } }, { "id": "od:deck:html-ppt-zhangzara-peoples-platform:example", "slug": "html-ppt-zhangzara-peoples-platform", "title": "Make a Public-Transit Funding Case like a Transportation Policy Lead", "summary": "A public-transit funding proposal for a city council — ridership need, the plan, the risk controls, and the ask. Built as a decision-grade policy briefing deck for city council, public board.", "tags": [ "deck", "government policy" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-peoples-platform/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-peoples-platform/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-peoples-platform.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-peoples-platform/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-peoples-platform:example.", "brief": "Create \"Make a Public-Transit Funding Case like a Transportation Policy Lead\" as a decision-grade Government & policy deck in this template's own visual system. Subject: A public-transit funding proposal for a city council — ridership need, the plan, the risk controls, and the ask. Audience: city council, public board. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck reduce approval risk rather than create rhetorical heat." } }, { "id": "od:deck:html-ppt-zhangzara-scatterbrain:example", "slug": "html-ppt-zhangzara-scatterbrain", "title": "Pitch a Graduation Design Project like a Portfolio-Ready Design Student", "summary": "A design-school graduation project: a civic wayfinding system for a transit hub — the brief, the process, and the outcome. Built as a decision-grade coursework defense deck for crit panel, faculty.", "tags": [ "deck", "student coursework" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-scatterbrain/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-scatterbrain/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-scatterbrain.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-scatterbrain/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-scatterbrain:example.", "brief": "Create \"Pitch a Graduation Design Project like a Portfolio-Ready Design Student\" as a decision-grade Student coursework deck in this template's own visual system. Subject: A design-school graduation project: a civic wayfinding system for a transit hub — the brief, the process, and the outcome. Audience: crit panel, faculty. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can a reviewer find the contribution, evidence, and limitation in under 90 seconds." } }, { "id": "od:deck:html-ppt-product-launch:example", "slug": "html-ppt-product-launch", "title": "Pitch a Team Rollout like a Strategic Account Executive", "summary": "OpenDesign Teams: a launch-and-adoption proposal for a mid-market design team weighing a switch from closed cloud tools. Built as a decision-grade B2B sales deck for design team lead, IT.", "tags": [ "deck", "b2b sales" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-product-launch/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-product-launch/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-product-launch.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-product-launch/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-product-launch:example.", "brief": "Create \"Pitch a Team Rollout like a Strategic Account Executive\" as a decision-grade B2B sales deck in this template's own visual system. Subject: OpenDesign Teams: a launch-and-adoption proposal for a mid-market design team weighing a switch from closed cloud tools. Audience: design team lead, IT. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can the champion forward this internally without rewriting it." } }, { "id": "od:deck:html-ppt-zhangzara-coral:example", "slug": "html-ppt-zhangzara-coral", "title": "Plan a Community-Growth Campaign like a Head of Growth", "summary": "OpenDesign's community-growth campaign across GitHub, Discord, and X: the loops, the content calendar, and the pipeline math. Built as a decision-grade marketing & GTM deck for growth team, community lead.", "tags": [ "deck", "marketing gtm" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-coral/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-coral/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-coral.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-coral/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-coral:example.", "brief": "Create \"Plan a Community-Growth Campaign like a Head of Growth\" as a decision-grade Marketing & GTM deck in this template's own visual system. Subject: OpenDesign's community-growth campaign across GitHub, Discord, and X: the loops, the content calendar, and the pipeline math. Audience: growth team, community lead. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can the plan connect creative choices to measurable growth." } }, { "id": "od:deck:huashu-golden-circle", "slug": "huashu-golden-circle", "title": "Present a Brand-Repositioning Strategy like a Top Consulting Principal", "summary": "A brand-repositioning strategy for a heritage coffee chain — why, how, what — the governing idea and the moves to prove it. Built as a decision-grade consulting deck for client CMO, board.", "tags": [ "deck", "consulting" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-golden-circle/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-golden-circle/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/huashu-golden-circle.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/huashu-golden-circle/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:huashu-golden-circle.", "brief": "Create \"Present a Brand-Repositioning Strategy like a Top Consulting Principal\" as a decision-grade Consulting deck in this template's own visual system. Subject: A brand-repositioning strategy for a heritage coffee chain — why, how, what — the governing idea and the moves to prove it. Audience: client CMO, board. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would a client know what to do Monday morning." } }, { "id": "od:deck:ve-midnight-editorial", "slug": "ve-midnight-editorial", "title": "Present a Financial Review like a Startup CFO", "summary": "OpenDesign's financial review: runway, burn, and the sustainability plan that keeps the project independent. Built as a decision-grade data & finance deck for board, leadership.", "tags": [ "deck", "data finance" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/ve-midnight-editorial/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/ve-midnight-editorial/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/ve-midnight-editorial.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/ve-midnight-editorial/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:ve-midnight-editorial.", "brief": "Create \"Present a Financial Review like a Startup CFO\" as a decision-grade Data, KPI & finance deck in this template's own visual system. Subject: OpenDesign's financial review: runway, burn, and the sustainability plan that keeps the project independent. Audience: board, leadership. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does every chart have a decision above it." } }, { "id": "od:deck:html-ppt-zhangzara-raw-grid:example", "slug": "html-ppt-zhangzara-raw-grid", "title": "Present a Poster-Series Case Study like a Festival Art Director", "summary": "A brutalist poster-series case study for a music festival — the concept, the system, and how it scaled across formats. Built as a decision-grade design craft deck for design peers, client.", "tags": [ "deck", "design craft" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-raw-grid/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-raw-grid/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-raw-grid.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-raw-grid/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-raw-grid:example.", "brief": "Create \"Present a Poster-Series Case Study like a Festival Art Director\" as a decision-grade Design craft deck in this template's own visual system. Subject: A brutalist poster-series case study for a music festival — the concept, the system, and how it scaled across formats. Audience: design peers, client. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck feel authored by a senior designer rather than generated." } }, { "id": "od:deck:html-ppt-zhangzara-blue-professional:example", "slug": "html-ppt-zhangzara-blue-professional", "title": "Present a Quarterly Business Review like a Chief of Staff", "summary": "OpenDesign's QBR for the executive committee: what moved, what stalled, and the resource reallocation ask. Built as a decision-grade corporate strategy deck for executive committee.", "tags": [ "deck", "corporate strategy" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-blue-professional/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-blue-professional/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-blue-professional.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-blue-professional/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-blue-professional:example.", "brief": "Create \"Present a Quarterly Business Review like a Chief of Staff\" as a decision-grade Corporate strategy deck in this template's own visual system. Subject: OpenDesign's QBR for the executive committee: what moved, what stalled, and the resource reallocation ask. Audience: executive committee. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would a board member know what to approve and why before page five." } }, { "id": "od:deck:html-ppt-zhangzara-cartesian:example", "slug": "html-ppt-zhangzara-cartesian", "title": "Present a Senior Thesis Defense like a Distinction-Grade Economics Student", "summary": "An economics senior thesis on the employment effects of local minimum-wage increases — identification strategy, evidence, and limitations. Built as a decision-grade coursework defense deck for thesis committee.", "tags": [ "deck", "student coursework" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-cartesian/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-cartesian/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-cartesian.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-cartesian/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-cartesian:example.", "brief": "Create \"Present a Senior Thesis Defense like a Distinction-Grade Economics Student\" as a decision-grade Student coursework deck in this template's own visual system. Subject: An economics senior thesis on the employment effects of local minimum-wage increases — identification strategy, evidence, and limitations. Audience: thesis committee. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can a reviewer find the contribution, evidence, and limitation in under 90 seconds." } }, { "id": "od:deck:html-ppt-zhangzara-long-table:example", "slug": "html-ppt-zhangzara-long-table", "title": "Present a Unit-Economics Model like an FP&A Partner", "summary": "OpenDesign's unit-economics and BYOK cost model: the assumptions, the sensitivity, and why it scales. Built as a decision-grade data & finance deck for CFO, investors.", "tags": [ "deck", "data finance" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-long-table/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-long-table/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-long-table.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-long-table/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-long-table:example.", "brief": "Create \"Present a Unit-Economics Model like an FP&A Partner\" as a decision-grade Data, KPI & finance deck in this template's own visual system. Subject: OpenDesign's unit-economics and BYOK cost model: the assumptions, the sensitivity, and why it scales. Audience: CFO, investors. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does every chart have a decision above it." } }, { "id": "od:deck:html-ppt-zhangzara-creative-mode:example", "slug": "html-ppt-zhangzara-creative-mode", "title": "Present a Visual-Identity System like a Lead Brand Designer", "summary": "A brand visual-identity system reveal for an outdoor label — logo, color, type, and the rules that keep it consistent. Built as a decision-grade design craft deck for brand team, client.", "tags": [ "deck", "design craft" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-creative-mode/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-creative-mode/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-creative-mode.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-creative-mode/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-creative-mode:example.", "brief": "Create \"Present a Visual-Identity System like a Lead Brand Designer\" as a decision-grade Design craft deck in this template's own visual system. Subject: A brand visual-identity system reveal for an outdoor label — logo, color, type, and the rules that keep it consistent. Audience: brand team, client. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck feel authored by a senior designer rather than generated." } }, { "id": "od:deck:html-ppt-zhangzara-stencil-tablet:example", "slug": "html-ppt-zhangzara-stencil-tablet", "title": "Present a Workplace-Safety Compliance Review like a Senior Regulator", "summary": "A workplace-safety compliance review for a manufacturing regulator — findings, the evidence chain, and the corrective mandate. Built as a decision-grade policy briefing deck for regulator, plant leadership.", "tags": [ "deck", "government policy" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-stencil-tablet/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-stencil-tablet/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-stencil-tablet.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-stencil-tablet/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-stencil-tablet:example.", "brief": "Create \"Present a Workplace-Safety Compliance Review like a Senior Regulator\" as a decision-grade Government & policy deck in this template's own visual system. Subject: A workplace-safety compliance review for a manufacturing regulator — findings, the evidence chain, and the corrective mandate. Audience: regulator, plant leadership. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck reduce approval risk rather than create rhetorical heat." } }, { "id": "od:deck:hps-true-blueprint", "slug": "hps-true-blueprint", "title": "Present an Engineering Blueprint like a Principal Architect", "summary": "OpenDesign's engineering blueprint: how the sandbox, sidecar, and daemon fit — the system diagram and the invariants. Built as a decision-grade product management deck for engineering org.", "tags": [ "deck", "product management" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/hps-true-blueprint/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/hps-true-blueprint/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/hps-true-blueprint.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/hps-true-blueprint/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:hps-true-blueprint.", "brief": "Create \"Present an Engineering Blueprint like a Principal Architect\" as a decision-grade Product management deck in this template's own visual system. Subject: OpenDesign's engineering blueprint: how the sandbox, sidecar, and daemon fit — the system diagram and the invariants. Audience: engineering org. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can cross-functional reviewers agree on the next irreversible step." } }, { "id": "od:deck:ppt-keynote:example", "slug": "ppt-keynote", "title": "Present an Operating-Model Redesign like a Strategy Engagement Lead", "summary": "An operating-model redesign for a scaling logistics firm — the diagnosis, the target model, and the transition roadmap. Built as a decision-grade consulting deck for client sponsor, ops leaders.", "tags": [ "deck", "consulting" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/ppt-keynote/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/ppt-keynote/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/ppt-keynote.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/ppt-keynote/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:ppt-keynote:example.", "brief": "Create \"Present an Operating-Model Redesign like a Strategy Engagement Lead\" as a decision-grade Consulting deck in this template's own visual system. Subject: An operating-model redesign for a scaling logistics firm — the diagnosis, the target model, and the transition roadmap. Audience: client sponsor, ops leaders. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would a client know what to do Monday morning." } }, { "id": "od:deck:html-ppt-zhangzara-block-frame:example", "slug": "html-ppt-zhangzara-block-frame", "title": "Rescue a Messy Deck to Board-Grade like an Executive Design Director", "summary": "Rescuing a messy startup deck into a board-grade system — the diagnosis, the page grammar, and the rebuilt proof pages. Built as a decision-grade design craft deck for founders, exec presenter.", "tags": [ "deck", "design craft" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-block-frame/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-block-frame/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-block-frame.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-block-frame/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-block-frame:example.", "brief": "Create \"Rescue a Messy Deck to Board-Grade like an Executive Design Director\" as a decision-grade Design craft deck in this template's own visual system. Subject: Rescuing a messy startup deck into a board-grade system — the diagnosis, the page grammar, and the rebuilt proof pages. Audience: founders, exec presenter. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck feel authored by a senior designer rather than generated." } }, { "id": "od:deck:html-ppt-hermes-cyber-terminal:example", "slug": "html-ppt-hermes-cyber-terminal", "title": "Run a BYOK Model-Choice Session like an Applied-AI Engineer", "summary": "OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.", "tags": [ "deck", "ai literacy" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-hermes-cyber-terminal/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-hermes-cyber-terminal/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-hermes-cyber-terminal.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-hermes-cyber-terminal/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-hermes-cyber-terminal:example.", "brief": "Create \"Run a BYOK Model-Choice Session like an Applied-AI Engineer\" as a decision-grade AI literacy deck in this template's own visual system. Subject: OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Audience: engineers, IT, applied-AI teams. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck make AI implementation concrete enough to fund." } }, { "id": "od:deck:html-ppt-presenter-mode-reveal:example", "slug": "html-ppt-presenter-mode-reveal", "title": "Run a Live AI Product Demo like a Founding DevRel Lead", "summary": "OpenDesign live demo: from a one-line prompt to runnable design in a single session — the flow, live. Built as a decision-grade AI literacy deck for developers, prospects, community.", "tags": [ "deck", "ai literacy" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-presenter-mode-reveal/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-presenter-mode-reveal/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-presenter-mode-reveal.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-presenter-mode-reveal/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-presenter-mode-reveal:example.", "brief": "Create \"Run a Live AI Product Demo like a Founding DevRel Lead\" as a decision-grade AI literacy deck in this template's own visual system. Subject: OpenDesign live demo: from a one-line prompt to runnable design in a single session — the flow, live. Audience: developers, prospects, community. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck make AI implementation concrete enough to fund." } }, { "id": "od:deck:weekly-update:example", "slug": "weekly-update", "title": "Run a Metrics Standup like a Data-Driven Ops Lead", "summary": "OpenDesign's weekly metrics standup: this week's numbers, the one anomaly, and the single decision it forces. Built as a decision-grade data & finance deck for ops & growth team.", "tags": [ "deck", "data finance" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/weekly-update/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/weekly-update/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/weekly-update.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/weekly-update/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:weekly-update:example.", "brief": "Create \"Run a Metrics Standup like a Data-Driven Ops Lead\" as a decision-grade Data, KPI & finance deck in this template's own visual system. Subject: OpenDesign's weekly metrics standup: this week's numbers, the one anomaly, and the single decision it forces. Audience: ops & growth team. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does every chart have a decision above it." } }, { "id": "od:deck:html-ppt-zhangzara-playful:example", "slug": "html-ppt-zhangzara-playful", "title": "Run a Sales-Floor Training like a Top Retail Coach", "summary": "A retail sales-floor training on consultative selling — the flow, the role-plays, and the daily habit that lifts conversion. Built as a decision-grade professional training deck for store associates, floor managers.", "tags": [ "deck", "professional training" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-playful/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-playful/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-playful.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-playful/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-playful:example.", "brief": "Create \"Run a Sales-Floor Training like a Top Retail Coach\" as a decision-grade Professional training deck in this template's own visual system. Subject: A retail sales-floor training on consultative selling — the flow, the role-plays, and the daily habit that lifts conversion. Audience: store associates, floor managers. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can a learner perform the target task the next day." } }, { "id": "od:deck:huashu-keynote-black", "slug": "huashu-keynote-black", "title": "Run an All-Hands Town Hall like a World-Class Founder-CEO", "summary": "OpenDesign's all-hands: the year in review, the three priorities, and what every team owns next quarter. Built as a decision-grade corporate strategy deck for whole company.", "tags": [ "deck", "corporate strategy" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-keynote-black/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-keynote-black/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/huashu-keynote-black.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/huashu-keynote-black/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:huashu-keynote-black.", "brief": "Create \"Run an All-Hands Town Hall like a World-Class Founder-CEO\" as a decision-grade Corporate strategy deck in this template's own visual system. Subject: OpenDesign's all-hands: the year in review, the three priorities, and what every team owns next quarter. Audience: whole company. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would a board member know what to approve and why before page five." } }, { "id": "od:deck:ve-terminal-mono", "slug": "ve-terminal-mono", "title": "Teach an AI CLI Workflow like a Developer-Tools Educator", "summary": "OpenDesign from the CLI: driving the full design workflow with the `od` command — scripted, composable, agent-ready. Built as a decision-grade AI literacy deck for developers, power users.", "tags": [ "deck", "ai literacy" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/ve-terminal-mono/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/ve-terminal-mono/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/ve-terminal-mono.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/ve-terminal-mono/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:ve-terminal-mono.", "brief": "Create \"Teach an AI CLI Workflow like a Developer-Tools Educator\" as a decision-grade AI literacy deck in this template's own visual system. Subject: OpenDesign from the CLI: driving the full design workflow with the `od` command — scripted, composable, agent-ready. Audience: developers, power users. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck make AI implementation concrete enough to fund." } }, { "id": "od:deck:hps-bauhaus", "slug": "hps-bauhaus", "title": "Teach Design Fundamentals like a World-Class Studio Mentor", "summary": "A visual-design fundamentals course for new brand designers — grid, type, color, and the exercises that build the eye. Built as a decision-grade professional training deck for junior designers, new hires.", "tags": [ "deck", "professional training" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/hps-bauhaus/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/hps-bauhaus/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/hps-bauhaus.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/hps-bauhaus/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:hps-bauhaus.", "brief": "Create \"Teach Design Fundamentals like a World-Class Studio Mentor\" as a decision-grade Professional training deck in this template's own visual system. Subject: A visual-design fundamentals course for new brand designers — grid, type, color, and the exercises that build the eye. Audience: junior designers, new hires. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can a learner perform the target task the next day." } }, { "id": "od:deck:huashu-slides", "slug": "huashu-slides", "title": "Tell a Career-Pivot Story like an Executive-Presence Coach", "summary": "A career-pivot story from consultant to product leader — the arc, the proof, and why the next role is the right bet. Built as a decision-grade career deck for hiring manager, mentors.", "tags": [ "deck", "career" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-slides/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-slides/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/huashu-slides.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/huashu-slides/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:huashu-slides.", "brief": "Create \"Tell a Career-Pivot Story like an Executive-Presence Coach\" as a decision-grade Career deck in this template's own visual system. Subject: A career-pivot story from consultant to product leader — the arc, the proof, and why the next role is the right bet. Audience: hiring manager, mentors. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the evidence make the claim feel earned." } }, { "id": "od:deck:html-ppt-zhangzara-sakura-chroma:example", "slug": "html-ppt-zhangzara-sakura-chroma", "title": "Turn a Cherry-Blossom Trip into a Photo Essay like a Travel Editorial Director", "summary": "A cherry-blossom-season travel photo essay through Kyoto — the arrival, the peak bloom, and the moment that made the trip. Built as a decision-grade story deck for friends, travel readers.", "tags": [ "deck", "life" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-sakura-chroma/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-sakura-chroma/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-sakura-chroma.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-sakura-chroma/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-sakura-chroma:example.", "brief": "Create \"Turn a Cherry-Blossom Trip into a Photo Essay like a Travel Editorial Director\" as a decision-grade Life & story deck in this template's own visual system. Subject: A cherry-blossom-season travel photo essay through Kyoto — the arrival, the peak bloom, and the moment that made the trip. Audience: friends, travel readers. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would someone retell the story after seeing it once." } }, { "id": "od:deck:html-ppt-zhangzara-pin-and-paper:example", "slug": "html-ppt-zhangzara-pin-and-paper", "title": "Turn a Field-Study Capstone into a Defense Deck like a Star Biology Major", "summary": "A field-biology capstone on urban pollinator decline — the survey design, the data, the contribution, and the caveats. Built as a decision-grade coursework defense deck for faculty reviewers.", "tags": [ "deck", "student coursework" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-pin-and-paper/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-pin-and-paper/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-pin-and-paper.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-pin-and-paper/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-pin-and-paper:example.", "brief": "Create \"Turn a Field-Study Capstone into a Defense Deck like a Star Biology Major\" as a decision-grade Student coursework deck in this template's own visual system. Subject: A field-biology capstone on urban pollinator decline — the survey design, the data, the contribution, and the caveats. Audience: faculty reviewers. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can a reviewer find the contribution, evidence, and limitation in under 90 seconds." } }, { "id": "od:deck:html-ppt-zhangzara-8-bit-orbit:example", "slug": "html-ppt-zhangzara-8-bit-orbit", "title": "Turn a Hobby into a Story Deck like a Passion-Project Storyteller", "summary": "A gamer's journey building a retro-arcade collection — the obsession, the hunt, and what the machines came to mean. Built as a decision-grade story deck for friends, hobby community.", "tags": [ "deck", "life" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-8-bit-orbit/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-8-bit-orbit/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-8-bit-orbit.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-8-bit-orbit/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-8-bit-orbit:example.", "brief": "Create \"Turn a Hobby into a Story Deck like a Passion-Project Storyteller\" as a decision-grade Life & story deck in this template's own visual system. Subject: A gamer's journey building a retro-arcade collection — the obsession, the hunt, and what the machines came to mean. Audience: friends, hobby community. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would someone retell the story after seeing it once." } }, { "id": "od:deck:hps-memphis-pop", "slug": "hps-memphis-pop", "title": "Turn a Pop-Culture Retrospective into a Talk like an Editorial Curator", "summary": "A pop-culture retrospective on how 1980s design language shaped today's apps — the scenes, the turning point, and the takeaway. Built as a decision-grade story deck for talk audience, design community.", "tags": [ "deck", "life" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/hps-memphis-pop/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/hps-memphis-pop/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/hps-memphis-pop.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/hps-memphis-pop/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:hps-memphis-pop.", "brief": "Create \"Turn a Pop-Culture Retrospective into a Talk like an Editorial Curator\" as a decision-grade Life & story deck in this template's own visual system. Subject: A pop-culture retrospective on how 1980s design language shaped today's apps — the scenes, the turning point, and the takeaway. Audience: talk audience, design community. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would someone retell the story after seeing it once." } }, { "id": "od:deck:kami-deck:example", "slug": "kami-deck", "title": "Turn a Study into a Lab Meeting Deck like a Senior Postdoc", "summary": "A lab-meeting deck on gut-microbiome links to sleep quality — the design, the results, the caveats, and the next experiment. Built as a decision-grade academic research deck for lab group, PI.", "tags": [ "deck", "academic research" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/kami-deck/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/kami-deck/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/kami-deck.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/kami-deck/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:kami-deck:example.", "brief": "Create \"Turn a Study into a Lab Meeting Deck like a Senior Postdoc\" as a decision-grade Academic research deck in this template's own visual system. Subject: A lab-meeting deck on gut-microbiome links to sleep quality — the design, the results, the caveats, and the next experiment. Audience: lab group, PI. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck prove novelty without overclaiming." } }, { "id": "od:deck:html-ppt-zhangzara-pink-script:example", "slug": "html-ppt-zhangzara-pink-script", "title": "Turn an Anniversary into a Photo Essay like a Wedding Storyteller", "summary": "A wedding-anniversary tribute photo essay — a decade in scenes, the turning points, and the quiet meaning of staying. Built as a decision-grade story deck for couple, family, friends.", "tags": [ "deck", "life" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-pink-script/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-pink-script/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-pink-script.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-pink-script/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-pink-script:example.", "brief": "Create \"Turn an Anniversary into a Photo Essay like a Wedding Storyteller\" as a decision-grade Life & story deck in this template's own visual system. Subject: A wedding-anniversary tribute photo essay — a decade in scenes, the turning points, and the quiet meaning of staying. Audience: couple, family, friends. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would someone retell the story after seeing it once." } }, { "id": "od:deck:html-ppt-knowledge-arch-blueprint:example", "slug": "html-ppt-knowledge-arch-blueprint", "title": "Turn an Incident Retro into a Learning Deck like a Platform VP", "summary": "OpenDesign's incident retro: the daemon-restart data bug, the root cause, the fix, and the systemic follow-ups. Built as a decision-grade product management deck for engineering, SRE, leadership.", "tags": [ "deck", "product management" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-knowledge-arch-blueprint/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-knowledge-arch-blueprint/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-knowledge-arch-blueprint.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-knowledge-arch-blueprint/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-knowledge-arch-blueprint:example.", "brief": "Create \"Turn an Incident Retro into a Learning Deck like a Platform VP\" as a decision-grade Product management deck in this template's own visual system. Subject: OpenDesign's incident retro: the daemon-restart data bug, the root cause, the fix, and the systemic follow-ups. Audience: engineering, SRE, leadership. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can cross-functional reviewers agree on the next irreversible step." } }, { "id": "od:deck:hps-retro-tv", "slug": "hps-retro-tv", "title": "Turn Home Movies into a Family-History Story like a Documentary Editor", "summary": "A family history told through five decades of home movies — the opening question, the eras, and what the footage reveals. Built as a decision-grade story deck for family, close friends.", "tags": [ "deck", "life" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/hps-retro-tv/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/hps-retro-tv/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/hps-retro-tv.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/hps-retro-tv/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:hps-retro-tv.", "brief": "Create \"Turn Home Movies into a Family-History Story like a Documentary Editor\" as a decision-grade Life & story deck in this template's own visual system. Subject: A family history told through five decades of home movies — the opening question, the eras, and what the footage reveals. Audience: family, close friends. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would someone retell the story after seeing it once." } }, { "id": "od:deck:fs-electric-studio", "slug": "fs-electric-studio", "title": "Write a B2B SaaS Sales Proposal like a Tier-1 Enterprise AE", "summary": "OpenDesign as an enterprise design platform: a buyer-forwardable proposal for a design-org's economic buyer — pain, value, ROI, rollout. Built as a decision-grade B2B sales deck for economic buyer, design VP, procuremen…", "tags": [ "deck", "b2b sales" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/fs-electric-studio/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/fs-electric-studio/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/fs-electric-studio.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/fs-electric-studio/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:fs-electric-studio.", "brief": "Create \"Write a B2B SaaS Sales Proposal like a Tier-1 Enterprise AE\" as a decision-grade B2B sales deck in this template's own visual system. Subject: OpenDesign as an enterprise design platform: a buyer-forwardable proposal for a design-org's economic buyer — pain, value, ROI, rollout. Audience: economic buyer, design VP, procurement. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can the champion forward this internally without rewriting it." } }, { "id": "od:deck:deck-swiss-international:example", "slug": "deck-swiss-international", "title": "Write a Board Pre-Read like a Fortune-500 Board Chair", "summary": "OpenDesign's FY26 board pre-read: the open-core bet, growth vs burn, and the one decision the board must approve. Built as a decision-grade corporate strategy deck for board, CEO, CFO.", "tags": [ "deck", "corporate strategy" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/deck-swiss-international/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/deck-swiss-international/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/deck-swiss-international.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/deck-swiss-international/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:deck-swiss-international:example.", "brief": "Create \"Write a Board Pre-Read like a Fortune-500 Board Chair\" as a decision-grade Corporate strategy deck in this template's own visual system. Subject: OpenDesign's FY26 board pre-read: the open-core bet, growth vs burn, and the one decision the board must approve. Audience: board, CEO, CFO. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would a board member know what to approve and why before page five." } }, { "id": "od:deck:fs-emerald-editorial", "slug": "fs-emerald-editorial", "title": "Write a Brand-Launch Narrative like a Growth Strategy Lead", "summary": "OpenDesign's 'design on your desk' brand-launch narrative: the market moment, the story, and the proof that converts. Built as a decision-grade marketing & GTM deck for marketing team, press.", "tags": [ "deck", "marketing gtm" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/fs-emerald-editorial/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/fs-emerald-editorial/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/fs-emerald-editorial.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/fs-emerald-editorial/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:fs-emerald-editorial.", "brief": "Create \"Write a Brand-Launch Narrative like a Growth Strategy Lead\" as a decision-grade Marketing & GTM deck in this template's own visual system. Subject: OpenDesign's 'design on your desk' brand-launch narrative: the market moment, the story, and the proof that converts. Audience: marketing team, press. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can the plan connect creative choices to measurable growth." } }, { "id": "od:deck:open-design-landing-deck:example", "slug": "open-design-landing-deck", "title": "Write a Brand-Story Deck like a Founder Storyteller", "summary": "OpenDesign's brand-story deck for partners and press: why it exists, what it believes, and where design is going. Built as a decision-grade marketing & GTM deck for partners, press, community.", "tags": [ "deck", "marketing gtm" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/open-design-landing-deck/", "preview": null, "thumbnail": null, "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/open-design-landing-deck/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:open-design-landing-deck:example.", "brief": "Create \"Write a Brand-Story Deck like a Founder Storyteller\" as a decision-grade Marketing & GTM deck in this template's own visual system. Subject: OpenDesign's brand-story deck for partners and press: why it exists, what it believes, and where design is going. Audience: partners, press, community. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can the plan connect creative choices to measurable growth." } }, { "id": "od:deck:huashu-bento-insight", "slug": "huashu-bento-insight", "title": "Write a Competitive Displacement Deck like a Top Sales Engineer", "summary": "OpenDesign vs closed cloud design tools: a side-by-side displacement case on control, cost (BYOK), and lock-in. Built as a decision-grade B2B sales deck for evaluation committee.", "tags": [ "deck", "b2b sales" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-bento-insight/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-bento-insight/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/huashu-bento-insight.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/huashu-bento-insight/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:huashu-bento-insight.", "brief": "Create \"Write a Competitive Displacement Deck like a Top Sales Engineer\" as a decision-grade B2B sales deck in this template's own visual system. Subject: OpenDesign vs closed cloud design tools: a side-by-side displacement case on control, cost (BYOK), and lock-in. Audience: evaluation committee. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can the champion forward this internally without rewriting it." } }, { "id": "od:deck:html-ppt-zhangzara-daisy-days:example", "slug": "html-ppt-zhangzara-daisy-days", "title": "Write a Customer Onboarding Workshop like a Field Enablement Director", "summary": "A customer-success workshop onboarding users to a project-management app — the first-value path and the habits that retain. Built as a decision-grade professional training deck for new customers, CS team.", "tags": [ "deck", "professional training" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-daisy-days/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-daisy-days/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-daisy-days.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-daisy-days/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-daisy-days:example.", "brief": "Create \"Write a Customer Onboarding Workshop like a Field Enablement Director\" as a decision-grade Professional training deck in this template's own visual system. Subject: A customer-success workshop onboarding users to a project-management app — the first-value path and the habits that retain. Audience: new customers, CS team. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can a learner perform the target task the next day." } }, { "id": "od:deck:html-ppt-pitch-deck:example", "slug": "html-ppt-pitch-deck", "title": "Write a Demo Day Pitch like a Top Accelerator Partner", "summary": "OpenDesign's demo-day pitch: hook, traction, moat, and the raise — built to make a partner sit up by page three. Built as a decision-grade fundraising pitch deck for accelerator partners, angels.", "tags": [ "deck", "fundraising pitch" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-pitch-deck/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-pitch-deck/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-pitch-deck.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-pitch-deck/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-pitch-deck:example.", "brief": "Create \"Write a Demo Day Pitch like a Top Accelerator Partner\" as a decision-grade Fundraising pitch deck in this template's own visual system. Subject: OpenDesign's demo-day pitch: hook, traction, moat, and the raise — built to make a partner sit up by page three. Audience: accelerator partners, angels. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would an investor know why this is venture-scale and urgent." } }, { "id": "od:deck:html-ppt-graphify-dark-graph:example", "slug": "html-ppt-graphify-dark-graph", "title": "Write a Feature Business Case like a Principal PM", "summary": "OpenDesign's feature business case for the plugin marketplace: the user pain, options, tradeoffs, and the measure of success. Built as a decision-grade product management deck for PM, eng, design, leadership.", "tags": [ "deck", "product management" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-graphify-dark-graph/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-graphify-dark-graph/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-graphify-dark-graph.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-graphify-dark-graph/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-graphify-dark-graph:example.", "brief": "Create \"Write a Feature Business Case like a Principal PM\" as a decision-grade Product management deck in this template's own visual system. Subject: OpenDesign's feature business case for the plugin marketplace: the user pain, options, tradeoffs, and the measure of success. Audience: PM, eng, design, leadership. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can cross-functional reviewers agree on the next irreversible step." } }, { "id": "od:deck:html-ppt-zhangzara-monochrome:example", "slug": "html-ppt-zhangzara-monochrome", "title": "Write a Grant Committee Brief like a Funded Principal Investigator", "summary": "A grant proposal on CRISPR base-editing for sickle-cell disease — the hypothesis, the approach, the milestones, and the risk. Built as a decision-grade academic research deck for grant review committee.", "tags": [ "deck", "academic research" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-monochrome/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-monochrome/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-monochrome.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-monochrome/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-monochrome:example.", "brief": "Create \"Write a Grant Committee Brief like a Funded Principal Investigator\" as a decision-grade Academic research deck in this template's own visual system. Subject: A grant proposal on CRISPR base-editing for sickle-cell disease — the hypothesis, the approach, the milestones, and the risk. Audience: grant review committee. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck prove novelty without overclaiming." } }, { "id": "od:deck:hps-y2k-chrome", "slug": "hps-y2k-chrome", "title": "Write a KPI Decision Brief like a CFO-Ready Analytics Lead", "summary": "OpenDesign's KPI decision brief: activation and retention drivers, what's working, and the one metric to move next. Built as a decision-grade data & finance deck for CRO, RevOps, leadership.", "tags": [ "deck", "data finance" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/hps-y2k-chrome/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/hps-y2k-chrome/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/hps-y2k-chrome.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/hps-y2k-chrome/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:hps-y2k-chrome.", "brief": "Create \"Write a KPI Decision Brief like a CFO-Ready Analytics Lead\" as a decision-grade Data, KPI & finance deck in this template's own visual system. Subject: OpenDesign's KPI decision brief: activation and retention drivers, what's working, and the one metric to move next. Audience: CRO, RevOps, leadership. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does every chart have a decision above it." } }, { "id": "od:deck:huashu-luxe-whitespace", "slug": "huashu-luxe-whitespace", "title": "Write a Luxury Market-Entry Deck like a Premium-Sector Strategy Partner", "summary": "A market-entry study for a luxury skincare brand entering Asia — segmentation, positioning, channel, and the phased plan. Built as a decision-grade consulting deck for client leadership.", "tags": [ "deck", "consulting" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-luxe-whitespace/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-luxe-whitespace/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/huashu-luxe-whitespace.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/huashu-luxe-whitespace/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:huashu-luxe-whitespace.", "brief": "Create \"Write a Luxury Market-Entry Deck like a Premium-Sector Strategy Partner\" as a decision-grade Consulting deck in this template's own visual system. Subject: A market-entry study for a luxury skincare brand entering Asia — segmentation, positioning, channel, and the phased plan. Audience: client leadership. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would a client know what to do Monday morning." } }, { "id": "od:deck:html-ppt-zhangzara-mat:example", "slug": "html-ppt-zhangzara-mat", "title": "Write a Margin-Recovery Final Deck like a McKinsey Engagement Manager", "summary": "A margin-recovery diagnosis for a regional grocery chain — the governing thought, the driver tree, the priorities, and the roadmap. Built as a decision-grade consulting deck for client sponsor, steering committee.", "tags": [ "deck", "consulting" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-mat/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-mat/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-mat.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-mat/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-mat:example.", "brief": "Create \"Write a Margin-Recovery Final Deck like a McKinsey Engagement Manager\" as a decision-grade Consulting deck in this template's own visual system. Subject: A margin-recovery diagnosis for a regional grocery chain — the governing thought, the driver tree, the priorities, and the roadmap. Audience: client sponsor, steering committee. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would a client know what to do Monday morning." } }, { "id": "od:deck:html-ppt-xhs-pastel-card:example", "slug": "html-ppt-xhs-pastel-card", "title": "Write a Personal Manifesto Talk like a Narrative Podcast Producer", "summary": "A personal manifesto: a year of saying yes — the premise, the scenes, the turn, and the meaning that lands. Built as a decision-grade story deck for community, talk audience.", "tags": [ "deck", "life" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-xhs-pastel-card/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-xhs-pastel-card/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-xhs-pastel-card.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-xhs-pastel-card/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-xhs-pastel-card:example.", "brief": "Create \"Write a Personal Manifesto Talk like a Narrative Podcast Producer\" as a decision-grade Life & story deck in this template's own visual system. Subject: A personal manifesto: a year of saying yes — the premise, the scenes, the turn, and the meaning that lands. Audience: community, talk audience. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would someone retell the story after seeing it once." } }, { "id": "od:deck:html-ppt-zhangzara-broadside:example", "slug": "html-ppt-zhangzara-broadside", "title": "Write a Product-Launch Announcement like a PR & Comms Director", "summary": "OpenDesign's product-launch announcement and press narrative — the headline, the proof points, and the call to action. Built as a decision-grade marketing & GTM deck for press, community, prospects.", "tags": [ "deck", "marketing gtm" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-broadside/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-broadside/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-broadside.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-broadside/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-broadside:example.", "brief": "Create \"Write a Product-Launch Announcement like a PR & Comms Director\" as a decision-grade Marketing & GTM deck in this template's own visual system. Subject: OpenDesign's product-launch announcement and press narrative — the headline, the proof points, and the call to action. Audience: press, community, prospects. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can the plan connect creative choices to measurable growth." } }, { "id": "od:deck:html-ppt-zhangzara-cobalt-grid:example", "slug": "html-ppt-zhangzara-cobalt-grid", "title": "Write a Renewal & Expansion Business Case like an Account Director", "summary": "OpenDesign renewal + seat-expansion business case for a growing customer: realized value, usage proof, and the expansion ROI. Built as a decision-grade B2B sales deck for champion, finance approver.", "tags": [ "deck", "b2b sales" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-cobalt-grid/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-cobalt-grid/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-cobalt-grid.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-cobalt-grid/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-cobalt-grid:example.", "brief": "Create \"Write a Renewal & Expansion Business Case like an Account Director\" as a decision-grade B2B sales deck in this template's own visual system. Subject: OpenDesign renewal + seat-expansion business case for a growing customer: realized value, usage proof, and the expansion ROI. Audience: champion, finance approver. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can the champion forward this internally without rewriting it." } }, { "id": "od:deck:huashu-sparkline-arc", "slug": "huashu-sparkline-arc", "title": "Write a Revenue-Driver Story like a Board-Level Finance Partner", "summary": "OpenDesign's revenue-driver narrative: what actually moves ARR, the leverage points, and the forecast. Built as a decision-grade data & finance deck for board, finance leadership.", "tags": [ "deck", "data finance" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-sparkline-arc/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-sparkline-arc/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/huashu-sparkline-arc.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/huashu-sparkline-arc/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:huashu-sparkline-arc.", "brief": "Create \"Write a Revenue-Driver Story like a Board-Level Finance Partner\" as a decision-grade Data, KPI & finance deck in this template's own visual system. Subject: OpenDesign's revenue-driver narrative: what actually moves ARR, the leverage points, and the forecast. Audience: board, finance leadership. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does every chart have a decision above it." } }, { "id": "od:deck:fs-creative-voltage", "slug": "fs-creative-voltage", "title": "Write a Seed Pitch like a Top Pre-Seed Founder", "summary": "OpenDesign's seed pitch: the open, local alternative to closed AI design — why now, the wedge, and the ask. Built as a decision-grade fundraising pitch deck for pre-seed & seed VCs.", "tags": [ "deck", "fundraising pitch" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/fs-creative-voltage/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/fs-creative-voltage/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/fs-creative-voltage.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/fs-creative-voltage/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:fs-creative-voltage.", "brief": "Create \"Write a Seed Pitch like a Top Pre-Seed Founder\" as a decision-grade Fundraising pitch deck in this template's own visual system. Subject: OpenDesign's seed pitch: the open, local alternative to closed AI design — why now, the wedge, and the ask. Audience: pre-seed & seed VCs. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would an investor know why this is venture-scale and urgent." } }, { "id": "od:deck:html-ppt-zhangzara-bold-poster:example", "slug": "html-ppt-zhangzara-bold-poster", "title": "Write a Series A Growth Story like a Tier-1 VC Partner", "summary": "OpenDesign's Series A growth story: the traction curve, the expansion motion, and why it's venture-scale. Built as a decision-grade fundraising pitch deck for Series A partners.", "tags": [ "deck", "fundraising pitch" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-bold-poster/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-bold-poster/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-bold-poster.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-bold-poster/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-bold-poster:example.", "brief": "Create \"Write a Series A Growth Story like a Tier-1 VC Partner\" as a decision-grade Fundraising pitch deck in this template's own visual system. Subject: OpenDesign's Series A growth story: the traction curve, the expansion motion, and why it's venture-scale. Audience: Series A partners. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would an investor know why this is venture-scale and urgent." } }, { "id": "od:deck:html-ppt-xhs-white-editorial:example", "slug": "html-ppt-xhs-white-editorial", "title": "Write a Staff-Engineer Promotion Case like a Calibration-Committee Insider", "summary": "A staff-engineer promotion packet — scope, the proof moments, the artifacts, and the impact that clears the bar. Built as a decision-grade career deck for manager, calibration committee.", "tags": [ "deck", "career" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-xhs-white-editorial/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-xhs-white-editorial/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-xhs-white-editorial.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-xhs-white-editorial/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-xhs-white-editorial:example.", "brief": "Create \"Write a Staff-Engineer Promotion Case like a Calibration-Committee Insider\" as a decision-grade Career deck in this template's own visual system. Subject: A staff-engineer promotion packet — scope, the proof moments, the artifacts, and the impact that clears the bar. Audience: manager, calibration committee. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the evidence make the claim feel earned." } }, { "id": "od:deck:html-ppt-zhangzara-signal:example", "slug": "html-ppt-zhangzara-signal", "title": "Write a Strategy Decision Memo like a Corp-Dev Lead", "summary": "OpenDesign's strategy memo: should it monetize the plugin registry now or hold — options, risks, and the recommendation. Built as a decision-grade corporate strategy deck for CEO, strategy team.", "tags": [ "deck", "corporate strategy" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-signal/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-signal/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-signal.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-signal/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-signal:example.", "brief": "Create \"Write a Strategy Decision Memo like a Corp-Dev Lead\" as a decision-grade Corporate strategy deck in this template's own visual system. Subject: OpenDesign's strategy memo: should it monetize the plugin registry now or hold — options, risks, and the recommendation. Audience: CEO, strategy team. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would a board member know what to approve and why before page five." } }, { "id": "od:deck:html-ppt-weekly-report:example", "slug": "html-ppt-weekly-report", "title": "Write a Weekly Growth Review like a Head of Analytics", "summary": "OpenDesign's weekly growth review: stars, installs, activation — the number, the driver, and the recommended move. Built as a decision-grade data & finance deck for growth & product team.", "tags": [ "deck", "data finance" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-weekly-report/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-weekly-report/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-weekly-report.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-weekly-report/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-weekly-report:example.", "brief": "Create \"Write a Weekly Growth Review like a Head of Analytics\" as a decision-grade Data, KPI & finance deck in this template's own visual system. Subject: OpenDesign's weekly growth review: stars, installs, activation — the number, the driver, and the recommended move. Audience: growth & product team. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does every chart have a decision above it." } }, { "id": "od:deck:html-ppt-zhangzara-capsule:example", "slug": "html-ppt-zhangzara-capsule", "title": "Write a Year-End Self-Review like a Promotion-Committee Insider", "summary": "A year-end self-review for a product manager — the role, the outcomes, the learning, and the ask, all evidence-backed. Built as a decision-grade career deck for manager, review committee.", "tags": [ "deck", "career" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-capsule/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-capsule/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-capsule.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-capsule/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-capsule:example.", "brief": "Create \"Write a Year-End Self-Review like a Promotion-Committee Insider\" as a decision-grade Career deck in this template's own visual system. Subject: A year-end self-review for a product manager — the role, the outcomes, the learning, and the ask, all evidence-backed. Audience: manager, review committee. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the evidence make the claim feel earned." } }, { "id": "od:deck:hps-academic-paper", "slug": "hps-academic-paper", "title": "Write an Academic Review Deck like a Top-Journal Survey Author", "summary": "A review deck on compositional generalization in large language models — the field map, the gap, the evidence, and open questions. Built as a decision-grade academic research deck for PI, lab group, reviewers.", "tags": [ "deck", "academic research" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/hps-academic-paper/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/hps-academic-paper/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/hps-academic-paper.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/hps-academic-paper/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:hps-academic-paper.", "brief": "Create \"Write an Academic Review Deck like a Top-Journal Survey Author\" as a decision-grade Academic research deck in this template's own visual system. Subject: A review deck on compositional generalization in large language models — the field map, the gap, the evidence, and open questions. Audience: PI, lab group, reviewers. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck prove novelty without overclaiming." } }, { "id": "od:deck:frontend-slides:example", "slug": "frontend-slides", "title": "Write an AI-Workflow 101 like a Top Technology Explainer", "summary": "OpenDesign as a worked AI-workflow example: how local agents read your files and design on your desktop — concretely. Built as a decision-grade AI literacy deck for teams new to AI, leadership.", "tags": [ "deck", "ai literacy" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/frontend-slides/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/frontend-slides/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/frontend-slides.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/frontend-slides/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:frontend-slides:example.", "brief": "Create \"Write an AI-Workflow 101 like a Top Technology Explainer\" as a decision-grade AI literacy deck in this template's own visual system. Subject: OpenDesign as a worked AI-workflow example: how local agents read your files and design on your desktop — concretely. Audience: teams new to AI, leadership. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck make AI implementation concrete enough to fund." } }, { "id": "od:deck:huashu-annual-letter", "slug": "huashu-annual-letter", "title": "Write an Annual Founder's Letter like a Mission-Driven CEO", "summary": "OpenDesign's annual letter to its community: the year's story, what it learned, and where it's going next. Built as a decision-grade corporate strategy deck for community, contributors, investors.", "tags": [ "deck", "corporate strategy" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-annual-letter/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/huashu-annual-letter/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/huashu-annual-letter.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/huashu-annual-letter/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:huashu-annual-letter.", "brief": "Create \"Write an Annual Founder's Letter like a Mission-Driven CEO\" as a decision-grade Corporate strategy deck in this template's own visual system. Subject: OpenDesign's annual letter to its community: the year's story, what it learned, and where it's going next. Audience: community, contributors, investors. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would a board member know what to approve and why before page five." } }, { "id": "od:deck:deck-guizang-editorial:example", "slug": "deck-guizang-editorial", "title": "Write an Annual Marketing Plan like a World-Class CMO", "summary": "OpenDesign's FY26 marketing plan: brand-to-pipeline — audience, offer, channel mix, and the launch calendar that ties creative to growth. Built as a decision-grade marketing & GTM deck for CMO, growth lead, founder.", "tags": [ "deck", "marketing gtm" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/deck-guizang-editorial/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/deck-guizang-editorial/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/deck-guizang-editorial.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/deck-guizang-editorial/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:deck-guizang-editorial:example.", "brief": "Create \"Write an Annual Marketing Plan like a World-Class CMO\" as a decision-grade Marketing & GTM deck in this template's own visual system. Subject: OpenDesign's FY26 marketing plan: brand-to-pipeline — audience, offer, channel mix, and the launch calendar that ties creative to growth. Audience: CMO, growth lead, founder. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can the plan connect creative choices to measurable growth." } }, { "id": "od:deck:deck-open-slide-canvas:example", "slug": "deck-open-slide-canvas", "title": "Write an Architecture Review like a World-Class Staff Engineer", "summary": "OpenDesign's architecture review: the local daemon + agent-runtime design, the tradeoffs, and the decision to lock. Built as a decision-grade product management deck for staff eng, tech leads, security.", "tags": [ "deck", "product management" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/deck-open-slide-canvas/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/deck-open-slide-canvas/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/deck-open-slide-canvas.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/deck-open-slide-canvas/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:deck-open-slide-canvas:example.", "brief": "Create \"Write an Architecture Review like a World-Class Staff Engineer\" as a decision-grade Product management deck in this template's own visual system. Subject: OpenDesign's architecture review: the local daemon + agent-runtime design, the tradeoffs, and the decision to lock. Audience: staff eng, tech leads, security. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: can cross-functional reviewers agree on the next irreversible step." } }, { "id": "od:deck:html-ppt-obsidian-claude-gradient:example", "slug": "html-ppt-obsidian-claude-gradient", "title": "Write an Enterprise AI Adoption Brief like a Transformation Lead", "summary": "OpenDesign's enterprise AI-adoption brief: local-first agents at work, the risk controls, the ROI, and the rollout plan. Built as a decision-grade AI literacy deck for leadership, IT, security.", "tags": [ "deck", "ai literacy" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-obsidian-claude-gradient/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-obsidian-claude-gradient/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-obsidian-claude-gradient.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-obsidian-claude-gradient/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-obsidian-claude-gradient:example.", "brief": "Create \"Write an Enterprise AI Adoption Brief like a Transformation Lead\" as a decision-grade AI literacy deck in this template's own visual system. Subject: OpenDesign's enterprise AI-adoption brief: local-first agents at work, the risk controls, the ROI, and the rollout plan. Audience: leadership, IT, security. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck make AI implementation concrete enough to fund." } }, { "id": "od:deck:ib-pitch-book:example", "slug": "ib-pitch-book", "title": "Write an Investor Pitch Book like a Growth-Equity Analyst", "summary": "OpenDesign's investor pitch book: market map, moat, unit economics, and the ask — analyst-grade and diligence-ready. Built as a decision-grade fundraising pitch deck for growth-equity investors.", "tags": [ "deck", "fundraising pitch" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/ib-pitch-book/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/ib-pitch-book/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/ib-pitch-book.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/ib-pitch-book/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:ib-pitch-book:example.", "brief": "Create \"Write an Investor Pitch Book like a Growth-Equity Analyst\" as a decision-grade Fundraising pitch deck in this template's own visual system. Subject: OpenDesign's investor pitch book: market map, moat, unit economics, and the ask — analyst-grade and diligence-ready. Audience: growth-equity investors. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would an investor know why this is venture-scale and urgent." } }, { "id": "od:deck:simple-deck:example", "slug": "simple-deck", "title": "Write an Operating Review like a Disciplined COO", "summary": "OpenDesign's operating review: growth, burn, and the concrete path to sustainability without losing the open ethos. Built as a decision-grade corporate strategy deck for leadership team.", "tags": [ "deck", "corporate strategy" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/simple-deck/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/simple-deck/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/simple-deck.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/simple-deck/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:simple-deck:example.", "brief": "Create \"Write an Operating Review like a Disciplined COO\" as a decision-grade Corporate strategy deck in this template's own visual system. Subject: OpenDesign's operating review: growth, burn, and the concrete path to sustainability without losing the open ethos. Audience: leadership team. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: would a board member know what to approve and why before page five." } }, { "id": "od:deck:html-ppt-zhangzara-grove:example", "slug": "html-ppt-zhangzara-grove", "title": "Write an Urban Green-Space Policy Brief like a City Sustainability Director", "summary": "A municipal urban-tree-canopy policy proposal — the public need, the evidence, the options, and the funding decision. Built as a decision-grade policy briefing deck for city council, agency reviewers.", "tags": [ "deck", "government policy" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-grove/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-zhangzara-grove/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-zhangzara-grove.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-zhangzara-grove/example.html", "prompts": { "remix": "Remix the Open Design example od:deck:html-ppt-zhangzara-grove:example.", "brief": "Create \"Write an Urban Green-Space Policy Brief like a City Sustainability Director\" as a decision-grade Government & policy deck in this template's own visual system. Subject: A municipal urban-tree-canopy policy proposal — the public need, the evidence, the options, and the funding decision. Audience: city council, agency reviewers. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck reduce approval risk rather than create rhetorical heat." } }, { "id": "od:design-system:style-tile:example", "slug": "style-tile", "title": "Style tile: Harbor", "summary": "A style tile for a calm fintech brand: cool neutrals, a deep harbor-blue accent, a serif display face with a geometric sans, soft radii.", "tags": [ "design-system" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/style-tile/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/style-tile/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/style-tile.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/style-tile/example.html", "prompts": { "remix": "Remix the Open Design example od:design-system:style-tile:example.", "brief": "Make a style tile for a calm, trustworthy fintech brand: palette with contrast ratios, a serif and sans type pairing, core components, and radius and spacing samples." } }, { "id": "od:image:image-poster:example", "slug": "image-poster", "title": "Image poster", "summary": "Single-image generation skill for posters, key art, and editorial illustrations. Defaults to gpt-image-2 but is provider-agnostic — the same workflow drives Flux, Imagen, or Midjourney via the active upstream tooling. O…", "tags": [ "image" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/image-poster/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/image-poster/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/image-poster.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/image-poster/example.html", "prompts": { "remix": "Remix the Open Design example od:image:image-poster:example.", "brief": "Editorial poster for an indie film festival — one bold abstract\nsilhouette over a warm, slightly grainy paper background; hand-set\nsans serif title at the top, festival dates and venue at the bottom\nin monospace. Muted ochre + ink palette." } }, { "id": "od:other:html-ppt-taste-brutalist:example", "slug": "html-ppt-taste-brutalist", "title": "Html ppt taste brutalist", "summary": "16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/t…", "tags": [ "other" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-taste-brutalist/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-taste-brutalist/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-taste-brutalist.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-taste-brutalist/example.html", "prompts": { "remix": "Remix the Open Design example od:other:html-ppt-taste-brutalist:example.", "brief": "16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill `brutalist-skill` (Tactical Telemetry mode)." } }, { "id": "od:other:html-ppt-taste-editorial:example", "slug": "html-ppt-taste-editorial", "title": "Html ppt taste editorial", "summary": "16:9 HTML deck in editorial-minimalist taste. Warm cream slides, serif display + grotesque body, hairline rules, monospace meta, generous macro-whitespace, one accent. Distilled from Leonxlnx/taste-skill `minimalist-ski…", "tags": [ "other" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-taste-editorial/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/html-ppt-taste-editorial/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/html-ppt-taste-editorial.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/html-ppt-taste-editorial/example.html", "prompts": { "remix": "Remix the Open Design example od:other:html-ppt-taste-editorial:example.", "brief": "16:9 HTML deck in editorial-minimalist taste. Warm cream slides, serif display + grotesque body, hairline rules, monospace meta, generous macro-whitespace, one accent. Distilled from Leonxlnx/taste-skill `minimalist-skill`." } }, { "id": "od:other:web-prototype-taste-brutalist:example", "slug": "web-prototype-taste-brutalist", "title": "Web prototype taste brutalist", "summary": "Swiss industrial-print web prototype. Newsprint canvas, monolithic black grotesque, viewport-bleeding numerals, hairline grid dividers, hazard-red accent, ASCII syntax decoration. Distilled from Leonxlnx/taste-skill `br…", "tags": [ "other" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/web-prototype-taste-brutalist/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/web-prototype-taste-brutalist/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/web-prototype-taste-brutalist.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/web-prototype-taste-brutalist/example.html", "prompts": { "remix": "Remix the Open Design example od:other:web-prototype-taste-brutalist:example.", "brief": "Swiss industrial-print web prototype. Newsprint canvas, monolithic black grotesque, viewport-bleeding numerals, hairline grid dividers, hazard-red accent, ASCII syntax decoration. Distilled from Leonxlnx/taste-skill `brutalist-skill` (Swiss Industrial Print mode)." } }, { "id": "od:other:web-prototype-taste-editorial:example", "slug": "web-prototype-taste-editorial", "title": "Web prototype taste editorial", "summary": "Editorial-minimalist web prototype. Warm monochrome canvas, serif display + grotesque body, 1px hairline borders, muted pastel chips, generous macro-whitespace, ambient micro-motion. Distilled from Leonxlnx/taste-skill…", "tags": [ "other" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/web-prototype-taste-editorial/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/web-prototype-taste-editorial/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/web-prototype-taste-editorial.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/web-prototype-taste-editorial/example.html", "prompts": { "remix": "Remix the Open Design example od:other:web-prototype-taste-editorial:example.", "brief": "Editorial-minimalist web prototype. Warm monochrome canvas, serif display + grotesque body, 1px hairline borders, muted pastel chips, generous macro-whitespace, ambient micro-motion. Distilled from Leonxlnx/taste-skill `minimalist-skill`." } }, { "id": "od:other:web-prototype-taste-soft:example", "slug": "web-prototype-taste-soft", "title": "Web prototype taste soft", "summary": "Apple-tier soft web prototype. Silver/cream canvas, double-bezel cards, button-in-button CTAs, generous squircle radii, spring motion, ambient mesh. Distilled from Leonxlnx/taste-skill `soft-skill` + sections 4–8 of `ta…", "tags": [ "other" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/web-prototype-taste-soft/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/web-prototype-taste-soft/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/web-prototype-taste-soft.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/web-prototype-taste-soft/example.html", "prompts": { "remix": "Remix the Open Design example od:other:web-prototype-taste-soft:example.", "brief": "Apple-tier soft web prototype. Silver/cream canvas, double-bezel cards, button-in-button CTAs, generous squircle radii, spring motion, ambient mesh. Distilled from Leonxlnx/taste-skill `soft-skill` + sections 4–8 of `taste-skill`." } }, { "id": "od:prototype:adr:example", "slug": "adr", "title": "ADR-0007: Lay diagrams out in the browser", "summary": "An example of the adr skill: ADR-0007: Lay diagrams out in the browser.", "tags": [ "page", "doc" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/adr/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/adr/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/adr.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/adr/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:adr:example.", "brief": "Write an ADR for laying diagrams out in the browser instead of with a graph-layout library: context, decision, options considered and consequences." } }, { "id": "od:prototype:blog-post:example", "slug": "blog-post", "title": "Blog post", "summary": "A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for \"blog\", \"article\", \"post\", \"essay\", or \"case study…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/blog-post/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/blog-post/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/blog-post.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/blog-post/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:blog-post:example.", "brief": "A long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for \"blog\", \"article\", \"post\", \"essay\", or \"case study\"." } }, { "id": "od:prototype:clinical-case-report:example", "slug": "clinical-case-report", "title": "Clinical case report", "summary": "Structured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when th…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/clinical-case-report/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/clinical-case-report/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/clinical-case-report.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/clinical-case-report/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:clinical-case-report:example.", "brief": "58-year-old male with 2 hours of substernal chest pain radiating to the left arm, diaphoresis, and ST elevation in leads II, III, aVF. Generate a full emergency cardiology case presentation." } }, { "id": "od:prototype:codex-interactive-capability-map", "slug": "codex-interactive-capability-map", "title": "Codex Interactive Capability Map", "summary": "Turn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/codex-interactive-capability-map/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/codex-interactive-capability-map/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/codex-interactive-capability-map.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/codex-interactive-capability-map/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:codex-interactive-capability-map.", "brief": "Turn this long-form article or thread into a Codex-style interactive capability map. Extract the core concepts, organize them into a workflow loop and use-case matrix, then build a polished single-file HTML prototype with clickable cards and a detail panel." } }, { "id": "od:prototype:competitive-teardown:example", "slug": "competitive-teardown", "title": "Competitive Teardown", "summary": "Positioning map, feature matrix, pricing comparison and opportunity windows: turns competitor research into a product decision report.", "tags": [ "page", "competitive teardown" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/competitive-teardown/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/competitive-teardown/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/competitive-teardown.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/competitive-teardown/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:competitive-teardown:example.", "brief": "Write a competitive teardown of these products: positioning map, feature matrix, pricing comparison, user sentiment, and where we should play." } }, { "id": "od:prototype:competitive-teardown-analyst-dossier", "slug": "competitive-teardown-analyst-dossier", "title": "Competitive Teardown — analyst dossier style", "summary": "Positioning map, feature matrix, pricing comparison and opportunity windows: turns competitor research into a product decision report. The analyst dossier style variant.", "tags": [ "page", "competitive teardown" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/competitive-teardown-analyst-dossier/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/competitive-teardown-analyst-dossier/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/competitive-teardown-analyst-dossier.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/competitive-teardown-analyst-dossier/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:competitive-teardown-analyst-dossier.", "brief": "Write a competitive teardown of these products: positioning map, feature matrix, pricing comparison, user sentiment, and where we should play." } }, { "id": "od:prototype:competitive-teardown-radar-map", "slug": "competitive-teardown-radar-map", "title": "Competitive Teardown — radar map style", "summary": "Positioning map, feature matrix, pricing comparison and opportunity windows: turns competitor research into a product decision report. The radar map style variant.", "tags": [ "page", "competitive teardown" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/competitive-teardown-radar-map/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/competitive-teardown-radar-map/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/competitive-teardown-radar-map.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/competitive-teardown-radar-map/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:competitive-teardown-radar-map.", "brief": "Write a competitive teardown of these products: positioning map, feature matrix, pricing comparison, user sentiment, and where we should play." } }, { "id": "od:prototype:competitive-teardown-war-room-grid", "slug": "competitive-teardown-war-room-grid", "title": "Competitive Teardown — war room grid style", "summary": "Positioning map, feature matrix, pricing comparison and opportunity windows: turns competitor research into a product decision report. The war room grid style variant.", "tags": [ "page", "competitive teardown" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/competitive-teardown-war-room-grid/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/competitive-teardown-war-room-grid/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/competitive-teardown-war-room-grid.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/competitive-teardown-war-room-grid/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:competitive-teardown-war-room-grid.", "brief": "Write a competitive teardown of these products: positioning map, feature matrix, pricing comparison, user sentiment, and where we should play." } }, { "id": "od:prototype:3d-scene:example", "slug": "3d-scene", "title": "Courtyard at dusk — 3D scene", "summary": "A small stone courtyard at dusk built from a scene spec: a Poly Haven sky, cobblestone and stone-wall textures, a brass lantern and two wooden planters (all CC0), with a 10-second camera flythrough.", "tags": [ "page", "3d" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/3d-scene/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/3d-scene/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/3d-scene.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/3d-scene/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:3d-scene:example.", "brief": "A small stone courtyard at dusk: cobblestones, rough stone walls on three sides, a brass lantern on a post, two wooden planters, a warm sky. Then give me a still and a 10-second flythrough video." } }, { "id": "od:prototype:critique:example", "slug": "critique", "title": "Critique", "summary": "Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Outputs a single self-contained HTML report with a rada…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/critique/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/critique/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/critique.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/critique/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:critique:example.", "brief": "Run a 5-dimension critique on the magazine-web-ppt deck I just generated — score philosophy / hierarchy / detail / function / innovation, give me Keep / Fix / Quick-wins." } }, { "id": "od:prototype:dashboard:example", "slug": "dashboard", "title": "Dashboard", "summary": "Admin / analytics dashboard in a single HTML file. Fixed left sidebar, top bar with user/search, main grid of KPI cards and one or two charts. Use when the brief asks for a \"dashboard\", \"admin\", \"analytics\", or \"control…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/dashboard/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/dashboard/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/dashboard.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/dashboard/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:dashboard:example.", "brief": "Admin / analytics dashboard in a single HTML file. Fixed left sidebar, top bar with user/search, main grid of KPI cards and one or two charts. Use when the brief asks for a \"dashboard\", \"admin\", \"analytics\", or \"control panel\" screen." } }, { "id": "od:prototype:data-report:example", "slug": "data-report", "title": "Data Visualization Report", "summary": "Turns CSV, Excel, or JSON data into a polished visual report page.", "tags": [ "page", "data" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/data-report/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/data-report/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/data-report.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/data-report/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:data-report:example.", "brief": "Use the Data Visualization Report template to turn my CSV, Excel, or JSON data into a polished visual report page. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." } }, { "id": "od:prototype:dating-web:example", "slug": "dating-web", "title": "Dating web", "summary": "A consumer-feeling dating / matchmaking dashboard — left rail navigation, ticker bar of community signals, headline KPIs, a 30-day mutual-matches bar chart, and a match-rate trend block. Editorial typography, restrained…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/dating-web/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/dating-web/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/dating-web.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/dating-web/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:dating-web:example.", "brief": "Design ‘mutuals’ — a dating site for X posters. Daily digest dashboard with stats, mutual-matches bar chart, and a community ticker." } }, { "id": "od:prototype:mockup-device-3d:example", "slug": "mockup-device-3d", "title": "Device 3D Showcase", "summary": "Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.", "tags": [ "page", "poster" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/mockup-device-3d/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/mockup-device-3d/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/mockup-device-3d.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/mockup-device-3d/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:mockup-device-3d:example.", "brief": "Use the Device 3D Showcase template to turn my content into a static iPhone and MacBook 3D-style showcase with real HTML embedded on the screens. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." } }, { "id": "od:prototype:digital-eguide:example", "slug": "digital-eguide", "title": "Digital eguide", "summary": "A two-spread digital e-guide preview — page 1 is a cover (display title, author, \"What's inside\" stats, table of contents teaser); page 2 is a spread (lesson body with pull-quote and a step list). Lifestyle / creator br…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/digital-eguide/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/digital-eguide/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/digital-eguide.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/digital-eguide/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:digital-eguide:example.", "brief": "Design 'The Creator's Style & Format Guide' — cover page and one inside spread, lifestyle creator brand." } }, { "id": "od:prototype:docs-page:example", "slug": "docs-page", "title": "Docs page", "summary": "A documentation page — inline-start nav, scrollable article body, inline-end table of contents. Use when the brief mentions \"docs\", \"documentation\", \"guide\", \"API reference\", or \"tutorial\".", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/docs-page/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/docs-page/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/docs-page.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/docs-page/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:docs-page:example.", "brief": "A documentation page — inline-start nav, scrollable article body, inline-end table of contents. Use when the brief mentions \"docs\", \"documentation\", \"guide\", \"API reference\", or \"tutorial\"." } }, { "id": "od:prototype:article-sketchnote-editorial:example", "slug": "article-sketchnote-editorial", "title": "Editorial Sketchnote", "summary": "Turns one concept into a magazine-style feature dossier — the real question, early failures, the turning point, the insight and its name — across six layout moulds.", "tags": [ "page", "article sketchnote editorial" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/article-sketchnote-editorial/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/article-sketchnote-editorial/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/article-sketchnote-editorial.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/article-sketchnote-editorial/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:article-sketchnote-editorial:example.", "brief": "Turn this concept into an editorial sketchnote feature: the real question, early attempts that failed, the turning point, the insight, and the name it was given." } }, { "id": "od:prototype:email-marketing:example", "slug": "email-marketing", "title": "Email marketing", "summary": "A brand product-launch email — masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA, and a specifications grid. Pure HTML email layout (centered single column, tabl…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/email-marketing/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/email-marketing/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/email-marketing.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/email-marketing/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:email-marketing:example.", "brief": "Design a launch email for a sporty running shoe brand — masthead, hero, big headline lockup, specs grid, CTA." } }, { "id": "od:prototype:eng-runbook:example", "slug": "eng-runbook", "title": "Eng runbook", "summary": "An engineering runbook — service overview, alerts table, dashboards links, common procedures with copy-pasteable commands, on-call rotation, and an incident-response checklist. Use when the brief mentions \"runbook\", \"op…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/eng-runbook/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/eng-runbook/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/eng-runbook.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/eng-runbook/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:eng-runbook:example.", "brief": "Write a runbook for our auth service — alerts, dashboards, common procedures, on-call rotation." } }, { "id": "od:prototype:exec-briefing-memo:example", "slug": "exec-briefing-memo", "title": "Executive Briefing Memo", "summary": "A one-page decision memo: the decision needed, a clear recommendation with confidence, key facts, tradeoffs, risks and next actions — compressed so a decision-maker can sign off in three minutes.", "tags": [ "page", "exec briefing memo" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/exec-briefing-memo/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/exec-briefing-memo/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/exec-briefing-memo.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/exec-briefing-memo/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:exec-briefing-memo:example.", "brief": "Turn these notes into a one-page executive briefing memo: the decision needed, a clear recommendation with a confidence level, key facts with their sources, a tradeoff table, risks and next actions." } }, { "id": "od:prototype:exec-briefing-memo-board-memo", "slug": "exec-briefing-memo-board-memo", "title": "Executive Briefing Memo — board memo style", "summary": "A one-page decision memo: the decision needed, a clear recommendation with confidence, key facts, tradeoffs, risks and next actions — compressed so a decision-maker can sign off in three minutes. The board memo style va…", "tags": [ "page", "exec briefing memo" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/exec-briefing-memo-board-memo/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/exec-briefing-memo-board-memo/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/exec-briefing-memo-board-memo.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/exec-briefing-memo-board-memo/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:exec-briefing-memo-board-memo.", "brief": "Turn these notes into a one-page executive briefing memo: the decision needed, a clear recommendation with a confidence level, key facts with their sources, a tradeoff table, risks and next actions." } }, { "id": "od:prototype:exec-briefing-memo-board-paper", "slug": "exec-briefing-memo-board-paper", "title": "Executive Briefing Memo — board paper style", "summary": "A one-page decision memo: the decision needed, a clear recommendation with confidence, key facts, tradeoffs, risks and next actions — compressed so a decision-maker can sign off in three minutes. The board paper style v…", "tags": [ "page", "exec briefing memo" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/exec-briefing-memo-board-paper/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/exec-briefing-memo-board-paper/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/exec-briefing-memo-board-paper.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/exec-briefing-memo-board-paper/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:exec-briefing-memo-board-paper.", "brief": "Turn these notes into a one-page executive briefing memo: the decision needed, a clear recommendation with a confidence level, key facts with their sources, a tradeoff table, risks and next actions." } }, { "id": "od:prototype:exec-briefing-memo-decision-command", "slug": "exec-briefing-memo-decision-command", "title": "Executive Briefing Memo — decision command style", "summary": "A one-page decision memo: the decision needed, a clear recommendation with confidence, key facts, tradeoffs, risks and next actions — compressed so a decision-maker can sign off in three minutes. The decision command st…", "tags": [ "page", "exec briefing memo" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/exec-briefing-memo-decision-command/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/exec-briefing-memo-decision-command/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/exec-briefing-memo-decision-command.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/exec-briefing-memo-decision-command/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:exec-briefing-memo-decision-command.", "brief": "Turn these notes into a one-page executive briefing memo: the decision needed, a clear recommendation with a confidence level, key facts with their sources, a tradeoff table, risks and next actions." } }, { "id": "od:prototype:experiment-readout:example", "slug": "experiment-readout", "title": "Experiment Readout", "summary": "Hypothesis, metrics, results, interpretation and decision: turns an A/B test or product experiment into a ship / stop / iterate recommendation.", "tags": [ "page", "experiment readout" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/experiment-readout/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/experiment-readout/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/experiment-readout.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/experiment-readout/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:experiment-readout:example.", "brief": "Turn this A/B test data into an experiment readout: hypothesis, primary and guardrail metrics, results with confidence, interpretation, and a ship / stop / iterate decision." } }, { "id": "od:prototype:experiment-readout-growth-console", "slug": "experiment-readout-growth-console", "title": "Experiment Readout — growth console style", "summary": "Hypothesis, metrics, results, interpretation and decision: turns an A/B test or product experiment into a ship / stop / iterate recommendation. The growth console style variant.", "tags": [ "page", "experiment readout" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/experiment-readout-growth-console/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/experiment-readout-growth-console/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/experiment-readout-growth-console.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/experiment-readout-growth-console/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:experiment-readout-growth-console.", "brief": "Turn this A/B test data into an experiment readout: hypothesis, primary and guardrail metrics, results with confidence, interpretation, and a ship / stop / iterate decision." } }, { "id": "od:prototype:experiment-readout-lab-notebook", "slug": "experiment-readout-lab-notebook", "title": "Experiment Readout — lab notebook style", "summary": "Hypothesis, metrics, results, interpretation and decision: turns an A/B test or product experiment into a ship / stop / iterate recommendation. The lab notebook style variant.", "tags": [ "page", "experiment readout" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/experiment-readout-lab-notebook/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/experiment-readout-lab-notebook/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/experiment-readout-lab-notebook.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/experiment-readout-lab-notebook/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:experiment-readout-lab-notebook.", "brief": "Turn this A/B test data into an experiment readout: hypothesis, primary and guardrail metrics, results with confidence, interpretation, and a ship / stop / iterate decision." } }, { "id": "od:prototype:experiment-readout-product-readout", "slug": "experiment-readout-product-readout", "title": "Experiment Readout — product readout style", "summary": "Hypothesis, metrics, results, interpretation and decision: turns an A/B test or product experiment into a ship / stop / iterate recommendation. The product readout style variant.", "tags": [ "page", "experiment readout" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/experiment-readout-product-readout/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/experiment-readout-product-readout/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/experiment-readout-product-readout.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/experiment-readout-product-readout/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:experiment-readout-product-readout.", "brief": "Turn this A/B test data into an experiment readout: hypothesis, primary and guardrail metrics, results with confidence, interpretation, and a ship / stop / iterate decision." } }, { "id": "od:prototype:3d-object-glb", "slug": "3d-object-glb", "title": "Field bottle — product shot from a GLB", "summary": "A product model loaded from a .glb, centered and framed automatically, with a soft ground shadow. The user's model variant.", "tags": [ "page", "3d" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/3d-object-glb/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/3d-object-glb/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/3d-object-glb.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/3d-object-glb/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:3d-object-glb.", "brief": "Make a product shot of models/bottle.glb on a soft green stage, turning slowly, then export a transparent PNG." } }, { "id": "od:prototype:finance-report:example", "slug": "finance-report", "title": "Finance report", "summary": "Quarterly / monthly financial report — masthead with KPIs, revenue and burn charts, P&L summary table, top-line highlights, and an outlook paragraph. Use when the brief mentions \"financial report\", \"Q3 report\", \"MRR rev…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/finance-report/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/finance-report/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/finance-report.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/finance-report/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:finance-report:example.", "brief": "Build me a Q3 financial report for an early-stage SaaS — MRR, burn, gross margin, top accounts." } }, { "id": "od:prototype:flowai-live-dashboard-template:example", "slug": "flowai-live-dashboard-template", "title": "Flowai live dashboard template", "summary": "Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity sparklines, and a to…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/flowai-live-dashboard-template/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/flowai-live-dashboard-template/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/flowai-live-dashboard-template.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/flowai-live-dashboard-template/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:flowai-live-dashboard-template:example.", "brief": "Create a FlowAI-style team management dashboard with Team Members, Team Details and Activity Log tabs, KPI cards, a member table with status badges, a role-distribution bar chart, an online-presence sparkline, top contributors, light/dark mode, and CSV export." } }, { "id": "od:prototype:info-funnel:example", "slug": "info-funnel", "title": "Funnel Infographic", "summary": "A 3–6 stage narrowing funnel that makes conversion rates, drop-off and filtering ratios obvious; vertical, sized for Stories and Xiaohongshu.", "tags": [ "page", "info funnel" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/info-funnel/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/info-funnel/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/info-funnel.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/info-funnel/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:info-funnel:example.", "brief": "Make a vertical funnel infographic of our signup conversion: visitors, signups, trials, paid, retained, with absolute numbers and stage-to-stage conversion rates." } }, { "id": "od:prototype:gamified-app:example", "slug": "gamified-app", "title": "Gamified app", "summary": "A multi-frame gamified mobile-app prototype — three phone frames on a dark showcase stage. Frame 1: cover / poster, Frame 2: today's quests with XP ribbons and a level bar, Frame 3: quest detail. Vivid quest tiles, leve…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/gamified-app/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/gamified-app/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/gamified-app.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/gamified-app/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:gamified-app:example.", "brief": "Design a gamified life-management app — multi-screen mobile prototype: cover poster, today's quests with XP, and a quest detail. ‘Daily quests for becoming a better human.’" } }, { "id": "od:prototype:github-dashboard:example", "slug": "github-dashboard", "title": "Github dashboard", "summary": "GitHub repository analytics dashboard — stars, forks, contributors, issues, pull requests, recent activity, and top contributors. Use when the brief asks for a GitHub repo dashboard, open-source growth report, repositor…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/github-dashboard/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/github-dashboard/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/github-dashboard.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/github-dashboard/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:github-dashboard:example.", "brief": "Build a GitHub dashboard for nexu-io/open-design — stars, forks, contributors, issues, PRs, recent activity, and top contributors." } }, { "id": "od:prototype:3d-object:example", "slug": "3d-object", "title": "Halo speaker — 3D product shot", "summary": "A procedural speaker built from a lathe profile, in studio light on a turntable, colored from the design tokens.", "tags": [ "page", "3d" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/3d-object/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/3d-object/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/3d-object.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/3d-object/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:3d-object:example.", "brief": "Make a 3D hero shot of our speaker, a soft cylinder with a glowing ring on top, in our brand colors, turning slowly." } }, { "id": "od:prototype:hr-onboarding:example", "slug": "hr-onboarding", "title": "Hr onboarding", "summary": "A new-hire onboarding plan as a single page — first week schedule, buddy + manager intro, learning track, equipment checklist, and \"you're set when…\" outcomes. Use when the brief mentions \"onboarding\", \"new hire\", \"firs…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/hr-onboarding/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/hr-onboarding/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/hr-onboarding.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/hr-onboarding/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:hr-onboarding:example.", "brief": "Build a 30-day onboarding plan for a new product designer joining a 40-person startup." } }, { "id": "od:prototype:invoice:example", "slug": "invoice", "title": "Invoice", "summary": "A printable invoice page — sender + recipient block, line items table, tax breakdown, totals, and payment instructions. Use when the brief mentions \"invoice\", \"bill\", \"billing statement\", or \"发票\".", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/invoice/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/invoice/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/invoice.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/invoice/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:invoice:example.", "brief": "Create an invoice from a freelance design studio billing a client for a brand identity project — three line items, 10% retainer, 9% sales tax." } }, { "id": "od:prototype:doc-kami-parchment:example", "slug": "doc-kami-parchment", "title": "Kami Parchment Document", "summary": "Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.", "tags": [ "page", "doc" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/doc-kami-parchment/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/doc-kami-parchment/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/doc-kami-parchment.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/doc-kami-parchment/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:doc-kami-parchment:example.", "brief": "Use the Kami Parchment Document template to turn my content into a warm parchment document with monochrome ink-blue accents, one serif family, and editorial-grade typography. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." } }, { "id": "od:prototype:kami-landing:example", "slug": "kami-landing", "title": "Kami landing", "summary": "Produce a print-grade single-page kami (紙 / 纸) document — warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. The output reads like a professional white paper or studio one-pager, not…", "tags": [ "page", "brand page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/kami-landing/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/kami-landing/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/kami-landing.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/kami-landing/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:kami-landing:example.", "brief": "Produce a print-grade single-page kami (紙 / 纸) document — warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. The output reads like a professional white paper or studio one-pager, not an app UI. Multilingual by design (EN · zh-CN · ja). One self-contained HTML file, zero dependencies." } }, { "id": "od:prototype:kanban-board:example", "slug": "kanban-board", "title": "Kanban board", "summary": "Kanban / task board with columns (To do / In progress / In review / Done), draggable-looking cards, assignee avatars, swimlanes, and a top filter bar. Use when the brief mentions \"kanban\", \"task board\", \"sprint board\",…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/kanban-board/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/kanban-board/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/kanban-board.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/kanban-board/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:kanban-board:example.", "brief": "Make me a kanban board for a 5-person growth squad mid-sprint — backlog, doing, review, done." } }, { "id": "od:prototype:live-dashboard:example", "slug": "live-dashboard", "title": "Live dashboard", "summary": "Notion-style team dashboard rendered as a Live Artifact. A single-page, self-contained HTML dashboard with KPIs, a 7-day sparkline, a real-time activity feed and a linked-database task table — wired to Notion via the Co…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/live-dashboard/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/live-dashboard/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/live-dashboard.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/live-dashboard/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:live-dashboard:example.", "brief": "Build me a Notion-style team dashboard for Acme Studio. KPIs: total tasks, done this week, active members, docs in review. Wire it to the Notion connector and let it refresh on demand." } }, { "id": "od:prototype:article-magazine:example", "slug": "article-magazine", "title": "Magazine Article", "summary": "Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.", "tags": [ "page", "article" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/article-magazine/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/article-magazine/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/article-magazine.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/article-magazine/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:article-magazine:example.", "brief": "Use the Magazine Article template to turn my content into a Huashu / huashu-md-html-inspired long-form HTML essay. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." } }, { "id": "od:prototype:magazine-poster:example", "slug": "magazine-poster", "title": "Magazine poster", "summary": "An editorial-style poster — newsprint paper, dateline, oversized serif headline with a struck-through word and italic accent, a 2-column body block, and 6 numbered sections with annotated pull-quote captions. Reads like…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/magazine-poster/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/magazine-poster/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/magazine-poster.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/magazine-poster/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:magazine-poster:example.", "brief": "Design an editorial magazine-style poster — ‘You don't need a designer to ship your first draft anymore.’ Newsprint paper, six numbered sections." } }, { "id": "od:prototype:poster-hero:example", "slug": "poster-hero", "title": "Marketing Poster", "summary": "Vertical poster or Moments-style share image with strong visual impact.", "tags": [ "page", "poster" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/poster-hero/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/poster-hero/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/poster-hero.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/poster-hero/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:poster-hero:example.", "brief": "Use the Marketing Poster template to turn my content into a vertical poster or Moments-style share image with strong visual impact. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." } }, { "id": "od:prototype:meeting-notes:example", "slug": "meeting-notes", "title": "Meeting notes", "summary": "Meeting notes page — title bar with attendees, agenda checklist, decisions block, action items table with owners + dates, and a \"next meeting\" footer. Use when the brief mentions \"meeting notes\", \"minutes\", \"1:1 notes\",…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/meeting-notes/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/meeting-notes/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/meeting-notes.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/meeting-notes/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:meeting-notes:example.", "brief": "Write up notes from a 60-minute Growth squad weekly — agenda, decisions, action items with owners, next meeting." } }, { "id": "od:prototype:mobile-app:example", "slug": "mobile-app", "title": "Mobile app", "summary": "A mobile-app screen rendered inside a pixel-accurate iPhone 15 Pro frame on the page. Built by copying the seed `assets/template.html` and pasting one screen archetype from `references/layouts.md`. Use when the brief as…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/mobile-app/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/mobile-app/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/mobile-app.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/mobile-app/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:mobile-app:example.", "brief": "A mobile-app screen rendered inside a pixel-accurate iPhone 15 Pro frame on the page. Built by copying the seed `assets/template.html` and pasting one screen archetype from `references/layouts.md`. Use when the brief asks for \"mobile app\", \"iOS app\", \"Android app\", \"phone screen\", or \"app UI\"." } }, { "id": "od:prototype:mobile-onboarding:example", "slug": "mobile-onboarding", "title": "Mobile onboarding", "summary": "A multi-screen mobile onboarding flow rendered as three phone frames side by side — splash, value-prop, sign-in. Status bar, swipe dots, primary CTA. Use when the brief mentions \"mobile onboarding\", \"iOS onboarding\", \"p…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/mobile-onboarding/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/mobile-onboarding/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/mobile-onboarding.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/mobile-onboarding/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:mobile-onboarding:example.", "brief": "Design a 3-screen mobile onboarding flow for a meditation app — welcome, value props, sign-in." } }, { "id": "od:prototype:resume-modern:example", "slug": "resume-modern", "title": "Modern Resume", "summary": "Modern minimal resume, single A4 page, ready for print or PDF export.", "tags": [ "page", "resume" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/resume-modern/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/resume-modern/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/resume-modern.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/resume-modern/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:resume-modern:example.", "brief": "Use the Modern Resume template to turn my content into a modern minimal single-page A4 resume ready for print or PDF export. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." } }, { "id": "od:prototype:motion-frames:example", "slug": "motion-frames", "title": "Motion frames", "summary": "A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyfr…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/motion-frames/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/motion-frames/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/motion-frames.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/motion-frames/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:motion-frames:example.", "brief": "Design an animated hero — a rotating type ring around a wireframe globe, with the headline ‘Reach every country.’ Loop at 12s, ready for HyperFrames export." } }, { "id": "od:prototype:3d-object-logo", "slug": "3d-object-logo", "title": "Northwind mark — 3D logo", "summary": "The brand's SVG mark extruded and bevelled in brushed gold, turning slowly. The extruded logo variant.", "tags": [ "page", "3d" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/3d-object-logo/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/3d-object-logo/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/3d-object-logo.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/3d-object-logo/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:3d-object-logo.", "brief": "Turn our logo SVG into a brushed-gold 3D mark that turns slowly, for the top of our launch page." } }, { "id": "od:prototype:changelog-page:example", "slug": "changelog-page", "title": "Open Design Agent Kit changelog", "summary": "An example of the changelog-page skill: Changelog: Open Design Agent Kit.", "tags": [ "page", "doc" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/changelog-page/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/changelog-page/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/changelog-page.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/changelog-page/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:changelog-page:example.", "brief": "Make a changelog page for our last three releases from the git tags and commits." } }, { "id": "od:prototype:orbit-general:example", "slug": "orbit-general", "title": "Orbit general", "summary": "Open Orbit briefing skill — selected by the Orbit pipeline when the user has two or more connectors connected. Pulls the past 24 hours of activity from every authenticated connector (GitHub, Linear, Notion, Slack, 飞书, C…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/orbit-general/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/orbit-general/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/orbit-general.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/orbit-general/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:orbit-general:example.", "brief": "Generate today's Open Orbit morning briefing. I have ~10 connectors connected (GitHub, Linear, Notion, Calendar, 飞书, Sentry, Vercel, Slack, Gmail, Drive). Pull yesterday's activity from each and render the editorial bento dashboard." } }, { "id": "od:prototype:orbit-github:example", "slug": "orbit-github", "title": "Orbit github", "summary": "Open Orbit briefing skill — selected by the Orbit pipeline when GitHub is the user's only connected connector, or when the user explicitly scopes their daily digest to GitHub. Pulls the past 24 hours of PRs, review requ…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/orbit-github/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/orbit-github/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/orbit-github.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/orbit-github/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:orbit-github:example.", "brief": "Generate today's Open Orbit GitHub briefing. GitHub is my only connected connector — pull yesterday's PRs, review requests, issues, CI runs, and merges and render them as a GitHub Notifications + PR-diff page." } }, { "id": "od:prototype:orbit-gmail:example", "slug": "orbit-gmail", "title": "Orbit gmail", "summary": "Open Orbit briefing skill — selected by the Orbit pipeline when Gmail is the user's only connected connector, or when the user explicitly scopes their daily digest to Gmail. Pulls the past 24 hours of inbox activity (re…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/orbit-gmail/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/orbit-gmail/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/orbit-gmail.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/orbit-gmail/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:orbit-gmail:example.", "brief": "Generate today's Open Orbit Gmail briefing. Gmail is my only connected connector — pull yesterday's mail and render it as the opened Orbit Daily Digest email inside Gmail's reading view." } }, { "id": "od:prototype:orbit-linear:example", "slug": "orbit-linear", "title": "Orbit linear", "summary": "Open Orbit briefing skill — selected by the Orbit pipeline when Linear is the user's only connected connector, or when the user explicitly scopes their daily digest to Linear. Pulls the past 24 hours of issue movement,…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/orbit-linear/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/orbit-linear/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/orbit-linear.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/orbit-linear/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:orbit-linear:example.", "brief": "Generate today's Open Orbit Linear briefing. Linear is my only connected connector — pull yesterday's issue movement, cycle progress, status changes, and assignments and render them in Linear's native Inbox layout." } }, { "id": "od:prototype:orbit-notion:example", "slug": "orbit-notion", "title": "Orbit notion", "summary": "Open Orbit briefing skill — selected by the Orbit pipeline when Notion is the user's only connected connector, or when the user explicitly scopes their daily digest to Notion. Pulls the past 24 hours of document edits,…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/orbit-notion/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/orbit-notion/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/orbit-notion.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/orbit-notion/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:orbit-notion:example.", "brief": "Generate today's Open Orbit Notion briefing. Notion is my only connected connector — pull yesterday's document edits, comments, @ mentions, and database row changes and render the digest as a native Notion page." } }, { "id": "od:prototype:diagram:example", "slug": "diagram", "title": "Package architecture diagram", "summary": "Architecture diagram of a monorepo's packages: shared foundations, the hosts built on them, runtime dependencies versus build-time copies, with each node linked to its package.json.", "tags": [ "page", "diagram" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/diagram/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/diagram/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/diagram.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/diagram/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:diagram:example.", "brief": "Diagram how this repo's packages depend on each other: read each package.json and the build scripts, group the shared packages and the hosts, and draw build-time copies dashed." } }, { "id": "od:prototype:pm-spec:example", "slug": "pm-spec", "title": "Pm spec", "summary": "Product spec / PRD as a single page — problem, success metrics, scope, user stories, design notes, rollout plan, open questions. Use when the brief mentions \"PRD\", \"spec\", \"product spec\", \"feature brief\", or \"需求文档\".", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/pm-spec/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/pm-spec/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/pm-spec.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/pm-spec/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:pm-spec:example.", "brief": "Write me a PRD for adding two-factor auth to our SaaS app — problem, scope, milestones, open questions." } }, { "id": "od:prototype:pr-explainer:example", "slug": "pr-explainer", "title": "PR explainer: add campaign export functionality", "summary": "An example of the pr-explainer skill: PR explainer: campaign kit.", "tags": [ "page", "doc" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/pr-explainer/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/pr-explainer/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/pr-explainer.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/pr-explainer/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:pr-explainer:example.", "brief": "Explain the latest commit as a pull request for reviewers: what changed and why, before and after, risks, tests, and a review tour of the files." } }, { "id": "od:prototype:pricing-page:example", "slug": "pricing-page", "title": "Pricing page", "summary": "A standalone pricing page — header, plan tiers, feature comparison table, and an FAQ. Use when the brief asks for \"pricing\", \"plans\", \"subscription tiers\", or a \"compare plans\" page.", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/pricing-page/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/pricing-page/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/pricing-page.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/pricing-page/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:pricing-page:example.", "brief": "A standalone pricing page — header, plan tiers, feature comparison table, and an FAQ. Use when the brief asks for \"pricing\", \"plans\", \"subscription tiers\", or a \"compare plans\" page." } }, { "id": "od:prototype:email-campaign:example", "slug": "email-campaign", "title": "Product launch email", "summary": "A product launch email that renders in Gmail, Outlook and Apple Mail: table layout, three benefit rows, a bulletproof button and a compliant footer.", "tags": [ "page", "email" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/email-campaign/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/email-campaign/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/email-campaign.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/email-campaign/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:email-campaign:example.", "brief": "A launch email for our new reporting dashboard: one headline, three short benefits, one button to try it, and a footer with unsubscribe and view-in-browser links." } }, { "id": "od:prototype:social-reddit-card:example", "slug": "social-reddit-card", "title": "Reddit Post Card", "summary": "Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.", "tags": [ "page", "card" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/social-reddit-card/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/social-reddit-card/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/social-reddit-card.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/social-reddit-card/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:social-reddit-card:example.", "brief": "Use the Reddit Post Card template to turn my content into a realistic Reddit post card with vote rail and comment count for a video overlay or story share. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." } }, { "id": "od:prototype:rfc:example", "slug": "rfc", "title": "RFC-012: Let the agent see what it built", "summary": "An example of the rfc skill: Let the agent see what it built.", "tags": [ "page", "doc" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/rfc/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/rfc/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/rfc.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/rfc/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:rfc:example.", "brief": "Write an RFC for letting the agent see what it built: problem, goals and non-goals, the proposal with alternatives, risks, rollout and open questions, from the openspec change." } }, { "id": "od:prototype:saas-landing:example", "slug": "saas-landing", "title": "Saas landing", "summary": "Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Respects the active DESIGN.md color/typography/layout tokens. Trigger keywords: \"saas landing\", \"marketing page\", \"product landing\".", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/saas-landing/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/saas-landing/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/saas-landing.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/saas-landing/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:saas-landing:example.", "brief": "Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Respects the active DESIGN.md color/typography/layout tokens. Trigger keywords: \"saas landing\", \"marketing page\", \"product landing\"." } }, { "id": "od:prototype:postmortem:example", "slug": "postmortem", "title": "Sample postmortem: exports hung on a confined browser", "summary": "An example of the postmortem skill: Sample postmortem: exports hung on a confined browser.", "tags": [ "page", "doc" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/postmortem/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/postmortem/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/postmortem.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/postmortem/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:postmortem:example.", "brief": "Write a postmortem from these incident notes: impact, timeline, root cause, contributing factors, what went well and badly, and action items with owners." } }, { "id": "od:prototype:social-carousel:example", "slug": "social-carousel", "title": "Social carousel", "summary": "A three-card social-media carousel laid out as 1080×1080 squares — three cinematic, on-brand panels with display headlines that connect across the series (\"onwards.\" → \"to the next one.\" → \"looking ahead.\"). Each card h…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/social-carousel/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/social-carousel/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/social-carousel.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/social-carousel/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:social-carousel:example.", "brief": "Design a 3-card cinematic social carousel — ‘onwards.’, ‘to the next one.’, ‘looking ahead.’. 1080×1080 squares, drop-into-Instagram ready." } }, { "id": "od:prototype:social-media-dashboard:example", "slug": "social-media-dashboard", "title": "Social media dashboard", "summary": "Creator-facing social media analytics dashboard in a single HTML file. A platform switcher (X / LinkedIn / YouTube / Instagram), a row of KPI cards (followers, engagement rate, likes, reposts), a follower-growth chart,…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/social-media-dashboard/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/social-media-dashboard/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/social-media-dashboard.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/social-media-dashboard/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:social-media-dashboard:example.", "brief": "Create a social media analytics dashboard using my Design System. Show X, LinkedIn, YouTube, Instagram with follower counts, engagement rate, likes, reposts, trending topics, and top comments." } }, { "id": "od:prototype:social-spotify-card:example", "slug": "social-spotify-card", "title": "Spotify Now-Playing Card", "summary": "Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.", "tags": [ "page", "card" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/social-spotify-card/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/social-spotify-card/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/social-spotify-card.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/social-spotify-card/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:social-spotify-card:example.", "brief": "Use the Spotify Now-Playing Card template to turn my content into a Spotify Now Playing-style card with album art, progress bar, and playback controls for a video overlay or personal homepage. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." } }, { "id": "od:prototype:sprite-animation:example", "slug": "sprite-animation", "title": "Sprite animation", "summary": "A pixel / sprite-style animated explainer slide — full-bleed cream stage, bold display year, animated pixel-art mascot (e.g. Hanafuda card, mushroom, or 8-bit console), kinetic Japanese display type, ticking timeline ri…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/sprite-animation/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/sprite-animation/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/sprite-animation.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/sprite-animation/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:sprite-animation:example.", "brief": "Create a sprite-based animation introducing trivia about Nintendo's history. Combine pixel mascots, animated text, and a Hanafuda accent. Use color and type that feel like the Nintendo brand." } }, { "id": "od:prototype:team-okrs:example", "slug": "team-okrs", "title": "Team okrs", "summary": "OKR tracker page — quarter banner, three objectives with their key results as progress bars, owner avatars, status pills, and a \"this quarter at a glance\" sidebar. Use when the brief mentions \"OKRs\", \"key results\", \"obj…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/team-okrs/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/team-okrs/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/team-okrs.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/team-okrs/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:team-okrs:example.", "brief": "Build an OKR tracker for Q4 — three objectives, three key results each, progress bars, owners, status pills." } }, { "id": "od:prototype:tweaks:example", "slug": "tweaks", "title": "Tweaks", "summary": "Wrap any HTML artifact with a side panel of live, parameterized controls — accent color, type scale, density, motion, theme — that rewrite CSS custom properties in real time and persist to localStorage. Lets the user ex…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/tweaks/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/tweaks/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/tweaks.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/tweaks/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:tweaks:example.", "brief": "Wrap this landing page with a tweak panel — accent color, type scale, density, light/dark — persist to localStorage so the user can refresh without losing their choice." } }, { "id": "od:prototype:card-twitter:example", "slug": "card-twitter", "title": "Twitter Share Card", "summary": "Twitter quote or data card designed to pair with a post.", "tags": [ "page", "card" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/card-twitter/", "preview": null, "thumbnail": null, "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/card-twitter/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:card-twitter:example.", "brief": "Use the Twitter Share Card template to turn my content into a Twitter quote or data card designed to pair with a post. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." } }, { "id": "od:prototype:velar-luxury-real-estate", "slug": "velar-luxury-real-estate", "title": "Velar luxury real estate", "summary": "Use this plugin when the user wants a high-end luxury real-estate / architecture landing page with cinematic scroll choreography: a typewriter preloader that lifts away, a scroll-driven house image that rises from below…", "tags": [ "page" ], "url": "https://feimacode.github.io/open-design-agent-kit/examples/velar-luxury-real-estate/", "preview": "https://feimacode.github.io/open-design-agent-kit/examples/velar-luxury-real-estate/preview.html", "thumbnail": "https://feimacode.github.io/open-design-agent-kit/examples/thumbs/velar-luxury-real-estate.webp", "source": "https://github.com/feimacode/open-design-agent-kit/blob/main/packages/content/assets/open-design/examples/velar-luxury-real-estate/example.html", "prompts": { "remix": "Remix the Open Design example od:prototype:velar-luxury-real-estate.", "brief": "Build a single-page React + TypeScript + Tailwind CSS + Vite landing page for a luxury real estate brand named \"Velar.\". Use only `lucide-react` for icons. The app is in `src/App.tsx`. Use the exact specifications below.\n\nGlobal Setup\n\n- Page background: `#f5f0ea` (warm off-white).\n- Body wrapper: `overflow-x: clip`.\n- Fonts (loaded via `@import` inside an inline `