@vm0/cli 9.167.1 → 9.168.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{chunk-XK7CCHB4.js → chunk-6JNZGYWI.js} +3 -3
- package/index.js +9 -9
- package/package.json +1 -1
- package/zero.js +2373 -990
- package/zero.js.map +1 -1
- /package/{chunk-XK7CCHB4.js.map → chunk-6JNZGYWI.js.map} +0 -0
package/zero.js
CHANGED
|
@@ -152,7 +152,7 @@ import {
|
|
|
152
152
|
zeroAgentCustomSkillNameSchema,
|
|
153
153
|
zeroLocalAgentCommand,
|
|
154
154
|
zeroTokenAllowsFeatureSwitch
|
|
155
|
-
} from "./chunk-
|
|
155
|
+
} from "./chunk-6JNZGYWI.js";
|
|
156
156
|
import {
|
|
157
157
|
__toESM,
|
|
158
158
|
init_esm_shims
|
|
@@ -6842,13 +6842,13 @@ var zeroSearchCommand = new Command().name("search").description("Search logs, c
|
|
|
6842
6842
|
if (sources.length > 1) {
|
|
6843
6843
|
throw new Error("Only one --source is allowed.");
|
|
6844
6844
|
}
|
|
6845
|
-
const
|
|
6846
|
-
if (!SUPPORTED_SOURCES.includes(
|
|
6845
|
+
const source = sources[0];
|
|
6846
|
+
if (!SUPPORTED_SOURCES.includes(source)) {
|
|
6847
6847
|
throw new Error(
|
|
6848
|
-
`Unknown --source "${
|
|
6848
|
+
`Unknown --source "${source}". Expected one of: ${SUPPORTED_SOURCES.join(", ")}`
|
|
6849
6849
|
);
|
|
6850
6850
|
}
|
|
6851
|
-
switch (
|
|
6851
|
+
switch (source) {
|
|
6852
6852
|
case "logs":
|
|
6853
6853
|
await runLogsSource(query, options);
|
|
6854
6854
|
return;
|
|
@@ -7266,893 +7266,2394 @@ var OPEN_DESIGN_COMMIT = "d021b04720ace133f1d6133d1487326f5fc28f07";
|
|
|
7266
7266
|
var VM0_SKILLS_REPO = "vm0-ai/vm0-skills";
|
|
7267
7267
|
var VM0_SKILLS_REF = "main";
|
|
7268
7268
|
var OPEN_DESIGN_REGISTRY_VERSION = `federated:${OPEN_DESIGN_REPO}@${OPEN_DESIGN_COMMIT}`;
|
|
7269
|
-
function sourceRef(repo, commit, path) {
|
|
7270
|
-
return {
|
|
7271
|
-
repo,
|
|
7272
|
-
commit,
|
|
7273
|
-
path
|
|
7274
|
-
};
|
|
7275
|
-
}
|
|
7276
|
-
function source(path) {
|
|
7277
|
-
return sourceRef(OPEN_DESIGN_REPO, OPEN_DESIGN_COMMIT, path);
|
|
7278
|
-
}
|
|
7279
|
-
var STYLE_OPEN_DESIGN_SKILL_SLUGS = [
|
|
7280
|
-
"8-bit-orbit-video-template",
|
|
7281
|
-
"after-hours-editorial-template",
|
|
7282
|
-
"algorithmic-art",
|
|
7283
|
-
"apple-hig",
|
|
7284
|
-
"brainstorming",
|
|
7285
|
-
"brand-guidelines",
|
|
7286
|
-
"canvas-design",
|
|
7287
|
-
"card-twitter",
|
|
7288
|
-
"card-xiaohongshu",
|
|
7289
|
-
"color-expert",
|
|
7290
|
-
"creative-director",
|
|
7291
|
-
"d3-visualization",
|
|
7292
|
-
"deck-guizang-editorial",
|
|
7293
|
-
"deck-open-slide-canvas",
|
|
7294
|
-
"deck-swiss-international",
|
|
7295
|
-
"design-consultation",
|
|
7296
|
-
"design-md",
|
|
7297
|
-
"design-review",
|
|
7298
|
-
"digits-fintech-swiss-template",
|
|
7299
|
-
"doc-kami-parchment",
|
|
7300
|
-
"editorial-burgundy-principles-template",
|
|
7301
|
-
"enhance-prompt",
|
|
7302
|
-
"faq-page",
|
|
7303
|
-
"field-notes-editorial-template",
|
|
7304
|
-
"figma-create-design-system-rules",
|
|
7305
|
-
"figma-generate-design",
|
|
7306
|
-
"figma-generate-library",
|
|
7307
|
-
"figma-implement-design",
|
|
7308
|
-
"flutter-animating-apps",
|
|
7309
|
-
"frame-data-chart-nyt",
|
|
7310
|
-
"frame-flowchart-sticky",
|
|
7311
|
-
"frame-glitch-title",
|
|
7312
|
-
"frame-light-leak-cinema",
|
|
7313
|
-
"frame-liquid-bg-hero",
|
|
7314
|
-
"frame-logo-outro",
|
|
7315
|
-
"frame-macos-notification",
|
|
7316
|
-
"frontend-design",
|
|
7317
|
-
"frontend-dev",
|
|
7318
|
-
"frontend-skill",
|
|
7319
|
-
"frontend-slides",
|
|
7320
|
-
"gsap-core",
|
|
7321
|
-
"gsap-react",
|
|
7322
|
-
"gsap-scrolltrigger",
|
|
7323
|
-
"gsap-timeline",
|
|
7324
|
-
"hand-drawn-diagrams",
|
|
7325
|
-
"hatch-pet",
|
|
7326
|
-
"html-ppt-retro-quarterly-review",
|
|
7327
|
-
"login-flow",
|
|
7328
|
-
"mockup-device-3d",
|
|
7329
|
-
"paywall-upgrade-cro",
|
|
7330
|
-
"plan-design-review",
|
|
7331
|
-
"platform-design",
|
|
7332
|
-
"poster-hero",
|
|
7333
|
-
"ppt-keynote",
|
|
7334
|
-
"release-notes-one-pager",
|
|
7335
|
-
"resume-modern",
|
|
7336
|
-
"screenshots-marketing",
|
|
7337
|
-
"shadcn-ui",
|
|
7338
|
-
"shader-dev",
|
|
7339
|
-
"slack-gif-creator",
|
|
7340
|
-
"slides",
|
|
7341
|
-
"social-reddit-card",
|
|
7342
|
-
"social-spotify-card",
|
|
7343
|
-
"social-x-post-card",
|
|
7344
|
-
"stitch-loop",
|
|
7345
|
-
"swiftui-design",
|
|
7346
|
-
"swiss-creative-mode-template",
|
|
7347
|
-
"swiss-user-research-video-template",
|
|
7348
|
-
"taste-skill",
|
|
7349
|
-
"theme-factory",
|
|
7350
|
-
"threejs",
|
|
7351
|
-
"ui-skills",
|
|
7352
|
-
"ui-ux-pro-max",
|
|
7353
|
-
"vfx-text-cursor",
|
|
7354
|
-
"video-hyperframes",
|
|
7355
|
-
"web-design-guidelines",
|
|
7356
|
-
"weread-year-in-review-video-template",
|
|
7357
|
-
"wpds"
|
|
7358
|
-
];
|
|
7359
|
-
var STYLE_OPEN_DESIGN_SKILL_DESCRIPTIONS = {
|
|
7360
|
-
"8-bit-orbit-video-template": "Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.",
|
|
7361
|
-
"after-hours-editorial-template": "Luxury dark-editorial HyperFrames template for three-page cinematic storyboards, inspired by haute couture title cards and magazine chapter spreads. Use when the user asks for premium fashion-style motion pages, moody serif-led storytelling, or a high-end dark presentation aesthetic with rich transitions.",
|
|
7362
|
-
"algorithmic-art": "Create generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame studies.",
|
|
7363
|
-
"apple-hig": "Apple Human Interface Guidelines as 14 agent skills covering platforms, foundations, components, patterns, inputs, and technologies for iOS, macOS, visionOS, watchOS, and tvOS.",
|
|
7364
|
-
brainstorming: "Transform rough ideas into fully-formed designs through structured questioning and alternative exploration. Useful early in concept work.",
|
|
7365
|
-
"brand-guidelines": "Apply Anthropic's official brand colors and typography to artifacts for consistent visual identity and professional design standards. A reference for shaping your own.",
|
|
7366
|
-
"canvas-design": "Create beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, illustrations, and static pieces.",
|
|
7367
|
-
"card-twitter": "Twitter quote or data card designed to pair with a post.",
|
|
7368
|
-
"card-xiaohongshu": "Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.",
|
|
7369
|
-
"color-expert": "Color science expert skill with 286K words of reference material covering OKLCH/OKLAB, palette generation, accessibility/contrast, color naming, pigment mixing, and historical color theory.",
|
|
7370
|
-
"creative-director": "AI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation.",
|
|
7371
|
-
"d3-visualization": "Teaches the agent to produce D3 charts and interactive data visualizations. Useful for editorial dashboards, reports, and explanatory graphics.",
|
|
7372
|
-
"deck-guizang-editorial": "Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune).",
|
|
7373
|
-
"deck-open-slide-canvas": "Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.",
|
|
7374
|
-
"deck-swiss-international": "16-column grid, one saturated accent, and 22 locked layouts (Klein Blue, Lemon, Mint, Safety Orange).",
|
|
7375
|
-
"design-consultation": "Build a complete design system from scratch with creative risks and realistic product mockups. Useful for kickoff workshops and brand-from-zero work.",
|
|
7376
|
-
"design-md": "Create and manage DESIGN.md files. Useful for capturing design direction, tokens, and visual rules in a single source of truth.",
|
|
7377
|
-
"design-review": "Designer Who Codes: visual audit then fixes with atomic commits and before/after screenshots. Useful for tightening shipped UI before launch.",
|
|
7378
|
-
"digits-fintech-swiss-template": "Swiss-grid fintech deck template in black / warm paper / neon-lime contrast. Use when users ask for premium data-story slides with strict modular layout, bold numeric cards, restrained motion, and keyboard/click navigation in one HTML file.",
|
|
7379
|
-
"doc-kami-parchment": "Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.",
|
|
7380
|
-
"editorial-burgundy-principles-template": "Editorial studio deck template in burgundy / blush / muted-gold palette. Use when users ask for premium manifesto or culture slides with pill tags, large typographic statements, principle cards, and guided keyboard/click navigation.",
|
|
7381
|
-
"enhance-prompt": "Improve prompts with design specs and UI/UX vocabulary. Useful for design-to-code workflows and clarifying requests for visual output.",
|
|
7382
|
-
"faq-page": 'A Frequently Asked Questions (FAQ) page with collapsible accordion sections, search functionality, and category filtering. Use when the brief asks for "FAQ", "help center", "questions", or "support page".',
|
|
7383
|
-
"field-notes-editorial-template": 'Editorial "Field Notes" report template with soft paper background, serif hero typography, rounded pastel insight cards, and a retention chart panel. Use when users ask for a premium magazine-style business report, board memo one-pager, or elegant data storytelling layout.',
|
|
7384
|
-
"figma-create-design-system-rules": "Generate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source.",
|
|
7385
|
-
"figma-generate-design": "Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.",
|
|
7386
|
-
"figma-generate-library": "Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.",
|
|
7387
|
-
"figma-implement-design": "Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.",
|
|
7388
|
-
"flutter-animating-apps": "Implement animated effects, transitions, and motion in Flutter apps. Useful for native iOS/Android motion design.",
|
|
7389
|
-
"frame-data-chart-nyt": "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).",
|
|
7390
|
-
"frame-flowchart-sticky": "SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.",
|
|
7391
|
-
"frame-glitch-title": "Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.",
|
|
7392
|
-
"frame-light-leak-cinema": "Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.",
|
|
7393
|
-
"frame-liquid-bg-hero": "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.",
|
|
7394
|
-
"frame-logo-outro": "Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.",
|
|
7395
|
-
"frame-macos-notification": "Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.",
|
|
7396
|
-
"frontend-design": "Frontend design and UI/UX development tools for shipping production-ready interfaces with strong typographic and layout discipline.",
|
|
7397
|
-
"frontend-dev": "Full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Useful for hero pages and showcase sites.",
|
|
7398
|
-
"frontend-skill": "Create visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook.",
|
|
7399
|
-
"frontend-slides": "Generate animation-rich HTML presentations with visual style previews. Useful for online keynotes, embedded talks, and interactive briefs.",
|
|
7400
|
-
"gsap-core": "Core GSAP API with gsap.to(), from(), fromTo(), easing, duration, stagger, and defaults. Production-grade web animation primitives.",
|
|
7401
|
-
"gsap-react": "GSAP React integration with useGSAP hook, refs, gsap.context(), cleanup, and SSR. Ships safe motion in React + Next.js apps.",
|
|
7402
|
-
"gsap-scrolltrigger": "GSAP ScrollTrigger for scroll-linked animations, pinning, scrub, and refresh handling. Useful for editorial sites and product pages.",
|
|
7403
|
-
"gsap-timeline": "GSAP Timelines with sequencing, position parameter, labels, nesting, and playback control. Useful for orchestrating multi-step motion sequences.",
|
|
7404
|
-
"hand-drawn-diagrams": "Generate hand-drawn Excalidraw diagrams from a prompt - animated SVG, hosted edit link, and PNG export. Works with Claude Code, Codex, Gemini CLI, and any agent supporting standard skill paths.",
|
|
7405
|
-
"hatch-pet": "Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells, row-by-row animation prompts, QA contact sheets, preview videos, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.",
|
|
7406
|
-
"html-ppt-retro-quarterly-review": "Retro Quarterly Review presentation template in a bold blue + orange editorial language. Use when users ask for a high-impact quarterly review / roadmap deck with heavyweight slab headlines, clean cream paper sections, structured grids, and fast premium motion pacing (3 slides, each hold under 3s in video mode).",
|
|
7407
|
-
"login-flow": "Mobile login and authentication flow screens",
|
|
7408
|
-
"mockup-device-3d": "Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.",
|
|
7409
|
-
"paywall-upgrade-cro": "Design and optimize upgrade screens, paywalls, and upsell modals. Useful for SaaS conversion design and pricing-page experiments.",
|
|
7410
|
-
"plan-design-review": "Senior Designer review: rates each design dimension 0-10, explains what a 10 looks like, and flags AI Slop signals. Useful as a gate before merging UI work.",
|
|
7411
|
-
"platform-design": "300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps. Useful when shipping a single design across iOS, Android, and the web.",
|
|
7412
|
-
"poster-hero": "Vertical poster or Moments-style share image with strong visual impact.",
|
|
7413
|
-
"ppt-keynote": "Apple Keynote-quality slides, one card per screen, with keyboard left/right navigation.",
|
|
7414
|
-
"release-notes-one-pager": 'Release notes one-page HTML with highlights, Added, Fixed, Breaking changes, Known issues, and Upgrade note. Writes explicit "None" style sections whenever the user does not provide details.',
|
|
7415
|
-
"resume-modern": "Modern minimal resume, single A4 page, ready for print or PDF export.",
|
|
7416
|
-
"screenshots-marketing": "Generate marketing screenshots with Playwright. Useful for landing-page hero shots, App Store screenshots, and changelog visuals.",
|
|
7417
|
-
"shadcn-ui": "Build UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.",
|
|
7418
|
-
"shader-dev": "GLSL shader techniques for ray marching, fluid simulation, particle systems, and procedural generation. Useful for hero visuals and motion stills.",
|
|
7419
|
-
"slack-gif-creator": "Create animated GIFs optimized for Slack with validators for size constraints and composable animation primitives.",
|
|
7420
|
-
slides: "Create and edit .pptx presentation decks with PptxGenJS. Useful for sales decks, kickoff briefs, and design-system showcases.",
|
|
7421
|
-
"social-reddit-card": "Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.",
|
|
7422
|
-
"social-spotify-card": "Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.",
|
|
7423
|
-
"social-x-post-card": "Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.",
|
|
7424
|
-
"stitch-loop": "Iterative design-to-code feedback loop. Critique adjust ship cycle for tightening visual fidelity between brief and built UI.",
|
|
7425
|
-
"swiftui-design": "SwiftUI skill - anti AI-slop rules, design direction advisor, brand asset protocol, and five-dimension review. Works with Claude Code, Cursor, Codex, and OpenCode.",
|
|
7426
|
-
"swiss-creative-mode-template": "Swiss-inspired creative-mode presentation template skill with bold editorial typography, high-contrast geometric cards, interactive slide navigation, theme switching, hotspot overlays, and palette choreography in a single-file HTML artifact. Use when users ask for a premium presentation-style landing, a Swiss/brutalist deck look, or a creative launch page with rich interactions.",
|
|
7427
|
-
"swiss-user-research-video-template": "Swiss-style user-research narrative template in warm-paper editorial aesthetics. Use when users ask for a premium research deck or story-first live artifact with minimalist typography, high-clarity layout, subtle motion, donut breakdowns, and keyboard/click navigation across slides in a single HTML file.",
|
|
7428
|
-
"taste-skill": "High-agency frontend skill that gives AI good taste with tunable design variance, motion intensity, and visual density to stop generic UI slop.",
|
|
7429
|
-
"theme-factory": "Apply professional font and color themes to artifacts including slides, docs, reports, and HTML landing pages. Ships 10 pre-set themes.",
|
|
7430
|
-
threejs: "Three.js skills for creating 3D elements and interactive experiences in the browser - scenes, materials, controls, and post-processing.",
|
|
7431
|
-
"ui-skills": "Opinionated, evolving constraints to guide agents when building interfaces. Useful for keeping output coherent across many small UI pieces.",
|
|
7432
|
-
"ui-ux-pro-max": "Catalog-only UI/UX Pro Max entry. The full upstream templates, data, and search workflow are not bundled in Open Design.",
|
|
7433
|
-
"vfx-text-cursor": "Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.",
|
|
7434
|
-
"video-hyperframes": "Hyperframes / Remotion-compatible continuous frame animation with autoplay support.",
|
|
7435
|
-
"web-design-guidelines": "Web design guidelines and standards by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.",
|
|
7436
|
-
"weread-year-in-review-video-template": "WeRead-inspired HyperFrames video template for vertical annual reading reports, personal reading dashboards, book-note recaps, and shareable year-in-review stories. Use when users want a 9:16 HTML-to-MP4 reading report with warm paper texture, editorial Chinese typography, book-page metaphors, data highlights, and deterministic motion.",
|
|
7437
|
-
wpds: "WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites."
|
|
7438
|
-
};
|
|
7439
|
-
var ADDITIONAL_OPEN_DESIGN_TEMPLATE_DESCRIPTIONS = {
|
|
7440
|
-
"audio-jingle": "Audio generation skill \u2014 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 is one MP3/WAV file saved to the project folder.",
|
|
7441
|
-
"blog-post": 'A long-form article / blog post \u2014 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".',
|
|
7442
|
-
"clinical-case-report": '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 the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".',
|
|
7443
|
-
critique: `Run a 5-dimension expert design review on any HTML artifact in the project \u2014 Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0\u201310. Outputs a single self-contained HTML report with a radar chart, evidence-backed scores, and three lists: Keep / Fix / Quick-wins. Use when the brief asks for a "design review", "design critique", "5 \u7EF4\u5EA6\u8BC4\u5BA1", "design audit", or "what's wrong with my design".`,
|
|
7444
|
-
"dating-web": 'A consumer-feeling dating / matchmaking dashboard \u2014 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 accent. Use when the brief asks for a "dating site", "matchmaking", "community dashboard", "social network dashboard", or any consumer product where the data is the story.',
|
|
7445
|
-
"dcf-valuation": 'Discounted cash flow valuation and intrinsic value analysis for public companies. Use when the brief asks for DCF, fair value, intrinsic value, price target, undervalued or overvalued analysis, or "what is this company worth?"',
|
|
7446
|
-
"digital-eguide": `A two-spread digital e-guide preview \u2014 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 brand tone. Use when the brief asks for an "e-guide", "digital guide", "lookbook", "lead magnet", "creator guide", "playbook", "PDF guide", or "\u7535\u5B50\u6307\u5357".`,
|
|
7447
|
-
"email-marketing": 'A brand product-launch email \u2014 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, table fallback). Use when the brief asks for an "email", "newsletter blast", "MJML", "product launch email", or "email template".',
|
|
7448
|
-
"eng-runbook": 'An engineering runbook \u2014 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", "ops doc", "on-call guide", "SRE doc", or "\u8FD0\u7EF4\u624B\u518C".',
|
|
7449
|
-
"flowai-live-dashboard-template": "Team-management dashboard skill in the FlowAI aesthetic \u2014 three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity sparklines, and a top-contributors panel, all in a single self-contained HTML file with light/dark theming, hoverable chart tooltips, click-to-zoom panels, and CSV export. Use when the brief asks for a team / workspace admin dashboard, an interactive admin dashboard with charts, or names FlowAI.",
|
|
7450
|
-
"gamified-app": `A multi-frame gamified mobile-app prototype \u2014 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, level ribbon, bottom tab bar. Use when the brief asks for a "gamified app", "habit tracker", "RPG-style life app", "level-up app", "daily quests", "XP / streak app", or "ELI5-style explainer app".`,
|
|
7451
|
-
"github-dashboard": "GitHub repository analytics dashboard \u2014 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, repository health page, or GitHub analytics view.",
|
|
7452
|
-
"guizang-ppt": '\u751F\u6210"\u7535\u5B50\u6742\u5FD7 \xD7 \u7535\u5B50\u58A8\u6C34"\u98CE\u683C\u7684\u6A2A\u5411\u7FFB\u9875\u7F51\u9875 PPT\uFF08\u5355 HTML \u6587\u4EF6\uFF09\uFF0C\u542B WebGL \u6D41\u4F53\u80CC\u666F\u3001\u886C\u7EBF\u6807\u9898 + \u975E\u886C\u7EBF\u6B63\u6587\u3001\u7AE0\u8282\u5E55\u5C01\u3001\u6570\u636E\u5927\u5B57\u62A5\u3001\u56FE\u7247\u7F51\u683C\u7B49\u6A21\u677F\u3002\u5F53\u7528\u6237\u9700\u8981\u5236\u4F5C\u5206\u4EAB / \u6F14\u8BB2 / \u53D1\u5E03\u4F1A\u98CE\u683C\u7684\u7F51\u9875 PPT\uFF0C\u6216\u63D0\u5230"\u6742\u5FD7\u98CE PPT"\u3001"horizontal swipe deck"\u3001"editorial magazine"\u3001"e-ink presentation"\u65F6\u4F7F\u7528\u3002',
|
|
7453
|
-
"hr-onboarding": `A new-hire onboarding plan as a single page \u2014 first week schedule, buddy + manager intro, learning track, equipment checklist, and "you're set when\u2026" outcomes. Use when the brief mentions "onboarding", "new hire", "first week plan", or "\u5165\u804C".`,
|
|
7454
|
-
"html-ppt": 'HTML PPT Studio \u2014 author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a presentation, PPT, slides, keynote, deck, slideshow, "\u5E7B\u706F\u7247", "\u6F14\u8BB2\u7A3F", "\u505A\u4E00\u4EFD PPT", "\u505A\u4E00\u4EFD slides", a reveal-style HTML deck, a \u5C0F\u7EA2\u4E66 \u56FE\u6587, or any kind of multi-slide pitch/report/sharing document that should look tasteful and be usable with keyboard navigation. Triggers include keywords like "presentation", "ppt", "slides", "deck", "keynote", "reveal", "slideshow", "\u5E7B\u706F\u7247", "\u6F14\u8BB2\u7A3F", "\u5206\u4EAB\u7A3F", "\u5C0F\u7EA2\u4E66\u56FE\u6587", "talk slides", "pitch deck", "tech sharing", "technical presentation".',
|
|
7455
|
-
"html-ppt-course-module": "Online-course / workshop module deck \u2014 warm paper background + Playfair serif, persistent left sidebar of learning objectives, MCQ self-check page. Use for teaching modules, training materials, workshop slides.",
|
|
7456
|
-
"html-ppt-dir-key-nav-minimal": '8 \u9875\u6781\u7B80\u65B9\u5411\u952E keynote \u2014 \u6BCF\u9875\u4E00\u4E2A\u72EC\u7ACB\u5355\u8272\u80CC\u666F\uFF08\u975B / \u5976 / \u7EDB / \u7FE0 / \u7070 / \u7D2B / \u767D / \u70AD\uFF09\uFF0C\u5404\u81EA\u914D\u8272\uFF0C160px display \u6807\u9898 + 4px \u77ED\u7C97 accent \u7EBF\u5206\u9694\u3001\u7BAD\u5934 \u2192 \u524D\u7F00\u7684 Mono \u5217\u8868\u3001\u5DE6\u4E0B \u2190 \u2192 kbd \u63D0\u793A + \u53F3\u4E0B\u9875\u7801\u3001\u5DE8\u5927\u547C\u5438\u7559\u767D\u3002\u9002\u5408"\u6709\u8BDD\u8981\u8BF4\u4F46\u6CA1\u4EC0\u4E48\u53EF\u770B"\u7684 keynote\u3001launch\u3001\u516C\u5F00\u6F14\u8BB2\u3002',
|
|
7457
|
-
"html-ppt-hermes-cyber-terminal": "\u6697\u7EC8\u7AEF honest-review deck \u2014 #0a0c10 \u9ED1\u5E95 + 56px \u8D5B\u535A\u7F51\u683C + CRT \u6697\u89D2 + \u626B\u63CF\u7EBF\u3001\u7A97\u53E3\u7EA2\u7EFF\u706F chrome\u3001`$ prompt` \u547D\u4EE4\u884C\u6807\u9898\u3001\u8584\u8377\u7EFF #7ed3a4 \u5927\u5B57\u3001JetBrains Mono\u3001stroke-only \u67F1\u72B6\u56FE\u3001blinking \u5149\u6807\u3001\u7425\u73C0/\u7EFF/\u7EA2\u4E09\u6863 tag\u3001\u6697\u8272\u4EE3\u7801\u5757\u3002\u9002\u5408 CLI / agent / dev tool \u6D4B\u8BC4\uFF08\u542B trace\u3001diff\u3001benchmark\uFF09\u3002",
|
|
7458
|
-
"html-ppt-knowledge-arch-blueprint": "\u5976\u6CB9\u84DD\u56FE\u67B6\u6784 deck \u2014 \u5976\u6CB9\u7EB8 #F0EAE0 \u5E95\u8272 + \u5355\u4E00\u9508\u7EA2 #B5392A \u9AD8\u4EAE\u300148px \u84DD\u56FE\u7F51\u683C mask\u30012px \u9ED1\u8FB9\u786C\u5361\u7247\u3001pipeline \u6B65\u9AA4\u76D2\uFF08\u5176\u4E2D\u4E00\u4E2A\u62AC\u9AD8\uFF09\u3001\u53F3\u4FA7\u9508\u7EA2 insight callout\u3001Playfair \u886C\u7EBF\u5927\u5B57\u3001SVG \u865A\u7EBF\u53CD\u9988\u73AF\u3002\u96F6\u6E10\u53D8\u96F6\u8F6F\u9634\u5F71\uFF0C\u8BA4\u771F\u4E14\u5370\u5237\u53CB\u597D\u3002",
|
|
7459
|
-
"html-ppt-obsidian-claude-gradient": "GitHub \u6697\u7D2B\u6E10\u53D8 deck \u2014 GitHub-dark #0d1117 + \u7D2B\u84DD radial \u73AF\u5883\u5149 + 60px \u7F51\u683C mask\u3001\u5C45\u4E2D\u5E03\u5C40\u3001\u7D2B\u8272 pill \u6807\u7B7E\u3001\u4E09\u8272\u6E10\u53D8\u6807\u9898\uFF08#a855f7\u2192#60a5fa\u2192#34d399\uFF09\u3001GitHub \u98CE\u4EE3\u7801 palette\u3001\u7D2B\u8272\u5DE6\u8FB9\u6846\u9AD8\u4EAE\u5757\u3002\u9002\u5408\u5F00\u53D1\u8005\u5DE5\u4F5C\u6D41 / MCP / Agent / dev tool \u6559\u7A0B\uFF0C\u7C7B\u4F3C GitHub Blog / Linear Changelog\u3002",
|
|
7460
|
-
"html-ppt-pitch-deck": "Investor-ready 10-slide HTML pitch deck \u2014 white + blue\u2192purple gradient hero, big numbers, traction bar chart, $4.5M-style ask page. Use when the user wants a fundraising deck, seed-round pitch, or VC meeting slides.",
|
|
7461
|
-
"html-ppt-presenter-mode-reveal": '\u6F14\u8BB2\u8005\u6A21\u5F0F\u4E13\u7528 deck \u2014 tokyo-night \u9ED8\u8BA4\u4E3B\u9898\uFF0C5 \u5957\u4E3B\u9898 T \u952E\u5207\u6362\uFF0C\u6BCF\u9875\u5E26 150-300 \u5B57\u9010\u5B57\u7A3F\u793A\u4F8B\uFF08<aside class="notes">\uFF09\uFF0C\u6309 S \u6253\u5F00 popup\uFF08CURRENT / NEXT / SCRIPT / TIMER \u56DB\u5F20\u78C1\u5438\u5361\u7247\uFF09\u3002\u7528\u4E8E\u6280\u672F\u5206\u4EAB\u3001\u516C\u5F00\u6F14\u8BB2\u3001\u8BFE\u7A0B\u8BB2\u89E3\uFF0C\u6015\u5FD8\u8BCD\u6216\u8981\u63D0\u8BCD\u5668\u7684\u573A\u666F\u3002',
|
|
7462
|
-
"html-ppt-product-launch": "Launch keynote deck \u2014 dark hero + light content, warm orange\u2192peach accent, feature cards, pricing tiers, CTA. Use when announcing a product, launching a feature, or doing a keynote-style reveal.",
|
|
7463
|
-
"html-ppt-taste-brutalist": "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).",
|
|
7464
|
-
"html-ppt-taste-editorial": "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`.",
|
|
7465
|
-
"html-ppt-tech-sharing": "Conference / internal tech-talk deck \u2014 GitHub-dark, JetBrains Mono, terminal code blocks, agenda + Q&A pages. Use for engineering presentations, internal sharing sessions, conference talks, and code-heavy walkthroughs.",
|
|
7466
|
-
"html-ppt-testing-safety-alert": "\u7EA2\u7425\u73C0\u8B66\u793A deck \u2014 \u9876/\u5E95 45\xB0 \u7EA2\u9ED1 hazard \u6761\u7EB9\u3001\u7EA2\u8272\u5220\u9664\u7EBF\u5426\u5B9A\u6807\u9898\u3001L1/L2/L3 \u7EFF/\u7425\u73C0/\u7EA2 tier \u5361\u7247\u3001\u5706\u70B9\u72B6\u6001 alert box\u3001policy-yaml \u4EE3\u7801\u5757\uFF08\u7EA2\u5DE6\u8FB9\u6846 + bad \u5173\u952E\u8BCD\u9AD8\u4EAE\uFF09\u3001\u7EA2\u7EFF checklist\u3001Q1 \u4E8B\u6545\u5806\u53E0\u67F1\u72B6\u56FE\u3002\u9002\u5408\u5B89\u5168 / \u98CE\u9669 / \u4E8B\u6545\u590D\u76D8 / \u7EA2\u961F / \u4E0A\u7EBF\u524D AI \u8BC4\u5BA1 / policy-as-code\u3002",
|
|
7467
|
-
"html-ppt-weekly-report": "Team weekly / status-update deck \u2014 corporate clarity, 8-cell KPI grid, shipped list, 8-week bar chart, next-week table. Use for \u5468\u62A5, business reviews, team status updates, and exec dashboards.",
|
|
7468
|
-
"html-ppt-xhs-pastel-card": '\u67D4\u548C\u9A6C\u5361\u9F99\u6162\u751F\u6D3B deck \u2014 \u5976\u6CB9 #fef8f1 \u5E95 + \u4E09\u4E2A\u67D4\u5149 blob\u3001Playfair \u659C\u4F53\u886C\u7EBF display \u6807\u9898\u6DF7 sans \u6B63\u6587\u300128px \u5706\u89D2\u9A6C\u5361\u9F99\u5361\u7247\uFF08\u6843 / \u8584\u8377 / \u5929 / \u7D2B / \u67E0 / \u73AB\uFF09\u3001Playfair \u659C\u4F53 01-04 \u5E8F\u53F7\u3001SVG donut \u56FE\u3001chip+page \u9876\u680F\u3002\u9002\u5408\u751F\u6D3B\u65B9\u5F0F / \u4E2A\u4EBA\u6210\u957F / \u6162\u751F\u6D3B / \u60C5\u7EEA\u7C7B\u5185\u5BB9\uFF0C"\u6742\u5FD7\u3001\u624B\u4F5C\u3001\u4E0D\u592A\u79D1\u6280"\u7684\u611F\u89C9\u3002',
|
|
7469
|
-
"html-ppt-xhs-post": "\u5C0F\u7EA2\u4E66 / Instagram \u98CE 9 \u9875 3:4 \u7AD6\u7248\u56FE\u6587\uFF08810\xD71080\uFF09\u2014 \u6696\u8272 pastel\u3001\u865A\u7EBF sticker \u5361\u7247\u3001\u5E95\u90E8\u9875\u7801\u70B9\u70B9\u3002\u7528\u4E8E\u53D1\u5C0F\u7EA2\u4E66\u56FE\u6587\u3001Instagram carousel\u3001\u54C1\u724C\u79CD\u8349\u5185\u5BB9\u3002",
|
|
7470
|
-
"html-ppt-xhs-white-editorial": "\u767D\u5E95\u6742\u5FD7\u98CE deck \u2014 \u7EAF\u767D\u80CC\u666F + \u9876\u90E8 10 \u8272\u5F69\u8679 bar\u300180-110px display \u6807\u9898\u3001\u7D2B\u2192\u84DD\u2192\u7EFF\u2192\u6A59\u2192\u7C89\u6E10\u53D8\u6587\u5B57\u3001\u9A6C\u5361\u9F99\u8F6F\u5361\u7247\u7EC4\uFF08\u7C89/\u7D2B/\u84DD/\u7EFF/\u6A59\uFF09\u3001\u9ED1\u5E95\u767D\u5B57 .focus pill\u3001\u5F15\u7528\u5927\u5757\u3002\u540C\u65F6\u9002\u5408\u53D1\u5C0F\u7EA2\u4E66\u56FE\u6587 + \u6A2A\u7248 PPT \u53CC\u7528\u3002",
|
|
7471
|
-
"html-ppt-zhangzara-8-bit-orbit": "8-Bit Orbit \u2014 Pixel-art neon arcade aesthetic on a deep navy void. Anything that should feel like a CRT screen at 2am: cyberpunk, gaming, web3, indie dev tools, hackathon demos.",
|
|
7472
|
-
"html-ppt-zhangzara-biennale-yellow": "Biennale Yellow \u2014 Solar yellow on warm parchment with deep indigo serif and atmospheric sun-glow gradients. Anything that should feel like an art-biennale poster or a museum's annual programme: exhibition decks, arts-institution announcements, design conference brochures, curatorial pitches, literary publications, studio retrospectives.",
|
|
7473
|
-
"html-ppt-zhangzara-block-frame": "BlockFrame \u2014 Neobrutalist deck with pastel-neon color blocks and chunky black borders. Anything that should feel pop-graphic and design-led: indie SaaS launches, agency credentials, creative reviews, brand redesigns.",
|
|
7474
|
-
"html-ppt-zhangzara-blue-professional": "Blue Professional \u2014 Cream paper background with electric cobalt blue accents; clean modern professional. Anything that should feel modern-considered and lightly authoritative: B2B SaaS pitches, consulting deliverables, advisory updates, investor reports.",
|
|
7475
|
-
"html-ppt-zhangzara-bold-poster": "Bold Poster \u2014 Editorial poster aesthetic with massive Shrikhand display and a single fire-engine red accent. Anything that should land like a magazine cover: brand manifestos, founder vision decks, editorial / cultural pitches, creative reviews.",
|
|
7476
|
-
"html-ppt-zhangzara-broadside": "Broadside \u2014 Dark editorial canvas with a single fire orange accent and bilingual Latin/Chinese type stack. Anything that should land like a broadside newspaper headline: brand manifestos, magazine and cultural pitches, design talks, bilingual EN/CN decks, founder vision statements.",
|
|
7477
|
-
"html-ppt-zhangzara-capsule": "Capsule \u2014 Modular pill-shaped cards on warm bone with a full pastel-pop palette. Anything that should feel modular, modern, and a little Y2K: lifestyle brands, creator portfolios, DTC launches, beauty / wellness, agency credentials.",
|
|
7478
|
-
"html-ppt-zhangzara-cartesian": "Cartesian \u2014 Quiet warm-neutral palette with classical Playfair serifs; tasteful and unhurried. Anything that should feel quiet, considered, and grown-up: investment theses, white papers, advisory work, longform research, gallery / cultural decks.",
|
|
7479
|
-
"html-ppt-zhangzara-cobalt-grid": "Cobalt Grid \u2014 Electric cobalt italic serifs on a graph-paper canvas, anchored by stair-stepped pixel-glitch decorations and slim hairline rules. Anything that should feel like a quietly serious design / research bulletin, art publication, or curated trend report.",
|
|
7480
|
-
"html-ppt-zhangzara-coral": "Coral \u2014 Cream and coral on near-black, set in oversized Bebas Neue. Anything that should feel warm-graphic and editorial: fashion, beauty, fitness, F&B, lifestyle brands, agency credentials.",
|
|
7481
|
-
"html-ppt-zhangzara-creative-mode": "Creative Mode \u2014 Cream paper canvas with confident multi-color (green, pink, orange, yellow) accents and Archivo Black display. Anything that should feel design-led and confident: creative agency pitches, design studio decks, ad shop credentials, brand creative reviews, art-direction reviews.",
|
|
7482
|
-
"html-ppt-zhangzara-daisy-days": "Daisy Days \u2014 Cheerful pastel deck with hand-drawn daisies, stars, and rainbows. Friendly, soft, and warm. Anything that should feel friendly, soft, and joyful: educational content, kids and family, wellness programs, community workshops, creator portfolios for craft / illustration.",
|
|
7483
|
-
"html-ppt-zhangzara-editorial-tri-tone": "Editorial Tri-Tone \u2014 Three-color editorial system: dusty pink, mustard cream, and deep burgundy, set in Bricolage + Instrument Serif. Anything that should feel like a fashion-magazine spread: editorial pitches, fashion brand decks, lifestyle media, art direction reviews.",
|
|
7484
|
-
"html-ppt-zhangzara-grove": "Grove \u2014 Forest-green canvas with cream type, classical Playfair serifs, and a single rust accent. Anything that should feel organic, considered, and grown-up: sustainability and wellness brands, outdoor / nature products, wineries and restaurants, literary or arts decks, advisory deliverables, bilingual EN/CN reports.",
|
|
7485
|
-
"html-ppt-zhangzara-long-table": "Long Table \u2014 Warm cream and rust-red supper-club aesthetic with bold uppercase grotesk headlines, italic Fraunces, and pill-shaped outlined buttons. Anything that should feel like a warm, intimate, modern hospitality / community brand: supper clubs, dinner series, small restaurants, creative-studio events, membership pitches, lifestyle and wine brands.",
|
|
7486
|
-
"html-ppt-zhangzara-mat": "Mat \u2014 Dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones. Anything that should feel mid-century, tactile, and intentional: design studio credentials, architecture / interior brands, ceramics / craft / furniture, advisory decks.",
|
|
7487
|
-
"html-ppt-zhangzara-monochrome": "Monochrome \u2014 Ivory ledger paper with all-black type; Lora serif headlines, Jost body, no color at all. Anything that should feel like a hand-typeset ledger: user research synthesis, white papers, longform reports, academic and policy briefs, advisory deliverables, bilingual EN/CN reports.",
|
|
7488
|
-
"html-ppt-zhangzara-neo-grid-bold": "Neo-Grid Bold \u2014 Editorial neo-brutalism with a single neon yellow accent on off-white paper. Anything that should feel confident and editorial-graphic: design-led pitches, brand work, founder talks, conference keynotes.",
|
|
7489
|
-
"html-ppt-zhangzara-peoples-platform": "People's Platform (Block & Bold) \u2014 Activist poster energy: blue, orange, red on cream, with Alfa Slab + Caveat Brush. Anything that should feel honest, loud, and graphic: cultural commentary, manifestos, civic and community decks, design talks, campaign pitches.",
|
|
7490
|
-
"html-ppt-zhangzara-pin-and-paper": "Pin & Paper \u2014 Yellow paper with safety-pin illustrations, ink-blue handwritten Caveat, paper-grain texture. Anything that should feel hand-crafted, warm, and literary: qualitative research findings, founder reflections, longform brand stories, workshop debriefs.",
|
|
7491
|
-
"html-ppt-zhangzara-pink-script": "Pink Script \u2014 After Hours \u2014 Black canvas, hot pink accent, pearl-cream paper, Instrument Serif headlines: late-night editorial luxury. Anything that should feel nocturnal, intentional, and a little luxe: fashion brand decks, creator personal brands, after-hours / nightlife / spirits launches, luxury product reveals, editorial features.",
|
|
7492
|
-
"html-ppt-zhangzara-playful": "Playful \u2014 Sun-warm peach background with Syne display: a friendly indie launch deck. Anything that should feel warm, indie, and approachable: creator portfolios, indie product launches, lifestyle brands, small-business pitches, newsletter / community decks.",
|
|
7493
|
-
"html-ppt-zhangzara-raw-grid": "Raw Grid \u2014 Neo-brutalist deck with thick borders, offset shadows, and a pink/sage/ink palette. Anything that should feel direct and graphic-confident: founder pitches, accelerator demos, brand decks, indie launches, creator portfolios.",
|
|
7494
|
-
"html-ppt-zhangzara-retro-windows": "Retro Windows \u2014 Windows 95 chrome: gray title bars, MS Sans Serif, pixel typography, full nostalgia. Anything that should feel knowingly nostalgic: retro gaming, Y2K-aesthetic brands, creator portfolios with a 90s vibe, tech-history talks, deliberately tongue-in-cheek decks.",
|
|
7495
|
-
"html-ppt-zhangzara-sakura-chroma": "Sakura Chroma \u2014 Vintage Japanese cassette-package aesthetic: cream paper, diagonal rainbow ribbons, condensed bold type, JIS-style spec checkboxes. Anything that should feel like a vintage Japanese cassette package or a TDK / Sony / Sakura Color product catalogue: indie hardware brand decks, music-label release schedules, analog studio retrospectives, zine and magazine pitches, kawaii-tech product launches, creative-studio annual reports.",
|
|
7496
|
-
"html-ppt-zhangzara-scatterbrain": "Scatterbrain \u2014 Post-it inspired: pastel sticky notes, Caveat handwriting, Shrikhand and Zilla Slab type stack. Anything that should feel like a designer's whiteboard: brainstorms, workshops, creative-agency credentials, design-thinking sessions, ideation pitches, art-direction reviews.",
|
|
7497
|
-
"html-ppt-zhangzara-signal": "Signal \u2014 Deep navy canvas with bone paper and a single muted-gold accent; institutional with quiet weight. Anything that should feel weighty, considered, and credibly institutional: investor decks, board presentations, consulting deliverables, legal / policy briefs, advisory pitches.",
|
|
7498
|
-
"html-ppt-zhangzara-soft-editorial": "Soft Editorial \u2014 Cormorant Garamond serif on warm paper with sage, blush, and lemon accents. Anything that should feel literary, elegant, and unhurried: editorial features, longform brand stories, gallery / museum decks, advisory deliverables, wedding / lifestyle media, founder essays.",
|
|
7499
|
-
"html-ppt-zhangzara-stencil-tablet": "Stencil & Tablet \u2014 Bone paper with stencil-cut headlines and a six-color earth palette: archaeology meets brand. Anything that should feel archival, tactile, and weighty-graphic: museum and cultural-institution decks, art / architecture brands, longform research, heritage and craft brands, manifestos.",
|
|
7500
|
-
"html-ppt-zhangzara-studio": "Studio \u2014 Black canvas with electric-yellow type; high-voltage design studio aesthetic. Anything that should feel electric and design-led: studio credentials, creative agency pitches, brand showcases, art-direction reviews, fashion / sneaker brand work.",
|
|
7501
|
-
"html-ppt-zhangzara-vellum": "Vellum \u2014 Deep navy canvas with warm-yellow italic Cormorant serifs and a single dusty teal accent. A quiet, scholarly aesthetic. Anything that should feel scholarly, literary, and quietly intelligent: research synthesis, white papers, academic and policy briefs, advisory deliverables, longform editorial pieces, founder reflections.",
|
|
7502
|
-
hyperframes: "Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.",
|
|
7503
|
-
"ib-pitch-book": "Investment-banking pitch book for strategic alternatives \u2014 trading comps, precedent transactions, valuation football field, DCF sensitivity, strategic-options matrix, process recommendation. Built by adapting `assets/template.html` so IB-specific chrome, disclosure bands, and source labels are preserved. Use for Board / sell-side discussion materials. Not a VC fundraising deck (see html-ppt-pitch-deck). Workflow adapted from Anthropic financial-services Pitch Agent (Apache-2.0).",
|
|
7504
|
-
"image-poster": "Single-image generation skill for posters, key art, and editorial illustrations. Defaults to gpt-image-2 but is provider-agnostic \u2014 the same workflow drives Flux, Imagen, or Midjourney via the active upstream tooling. Output is one or more PNG/JPEG files saved to the project folder.",
|
|
7505
|
-
invoice: 'A printable invoice page \u2014 sender + recipient block, line items table, tax breakdown, totals, and payment instructions. Use when the brief mentions "invoice", "bill", "billing statement", or "\u53D1\u7968".',
|
|
7506
|
-
"kami-deck": "Produce a print-grade slide deck in the kami (\u7D19 / \u7EB8) design system \u2014 warm parchment background (or ink-blue for cover / chapter slides), serif at one weight, ink-blue accent \u2264 5% per slide, no italic. Horizontal magazine swipe pagination (\u2190/\u2192 \xB7 wheel \xB7 swipe \xB7 ESC overview). One self-contained HTML file, zero dependencies beyond Google Fonts.",
|
|
7507
|
-
"kami-landing": "Produce a print-grade single-page kami (\u7D19 / \u7EB8) document \u2014 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 \xB7 zh-CN \xB7 ja). One self-contained HTML file, zero dependencies.",
|
|
7508
|
-
"kanban-board": '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", "trello", "\u770B\u677F".',
|
|
7509
|
-
last30days: "Recent community and social trend research over the last 30 days. Use when the brief asks what people are saying now, recent sentiment, community reactions, social proof, launch reaction, trend scan, or last-30-days context.",
|
|
7510
|
-
"live-artifact": "Create refreshable, auditable Open Design artifacts backed by connector or local data. Trigger when the user asks for live dashboards, refreshable reports, synced views, or reusable data-backed artifacts.",
|
|
7511
|
-
"live-dashboard": "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 \u2014 wired to Notion via the Composio connector catalog. Refreshes on demand and when the artifact is opened. Falls back to seeded mock data when no connector is bound, so it works offline / in screenshots / in the picker preview.",
|
|
7512
|
-
"magazine-poster": 'An editorial-style poster \u2014 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 a Sunday-paper full-page essay or a thoughtful launch poster. Use when the brief asks for "magazine poster", "editorial poster", "newsprint", "essay layout", or "manifesto".',
|
|
7513
|
-
"meeting-notes": 'Meeting notes page \u2014 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", "all-hands recap", or "\u4F1A\u8BAE\u7EAA\u8981".',
|
|
7514
|
-
"mobile-onboarding": 'A multi-screen mobile onboarding flow rendered as three phone frames side by side \u2014 splash, value-prop, sign-in. Status bar, swipe dots, primary CTA. Use when the brief mentions "mobile onboarding", "iOS onboarding", "phone signup", or "\u79FB\u52A8\u7AEF\u5F15\u5BFC".',
|
|
7515
|
-
"motion-frames": 'A single-frame motion-design composition with looping CSS animations \u2014 rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. Use when the brief asks for "motion design", "animated hero", "loop", "video poster", "title card", or pairs Open Claude Design with HyperFrames for a kinetic export.',
|
|
7516
|
-
"open-design-landing": "Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / \xC9tudes editorial collage) \u2014 the same aesthetic Open Design uses for its own marketing surface. The agent fills a typed `inputs.json` from a brand brief, optionally generates 16 collage assets via gpt-image-2, then runs a pure-function composer that emits a self-contained HTML file; a separate path can mirror the Astro marketing site in `apps/landing-page/`. Drop-in scroll-reveal motion and a Headroom-style sticky nav are wired automatically.",
|
|
7517
|
-
"open-design-landing-deck": "Produce a single-file slide deck in the Atelier Zero visual language (warm-paper background, italic-serif emphasis spans, coral terminating dots, surreal collage plates) \u2014 Open Design's brand deck recipe. The deck uses **horizontal magazine-style swipe pagination** (\u2190/\u2192, wheel, swipe), a per-slide chrome strip with brand mark and slide counter, an ESC overview grid, a coral progress bar, and inherits the canonical stylesheet + 16-slot image library from the sister `open-design-landing` skill.",
|
|
7518
|
-
"orbit-general": `Open Orbit briefing skill \u2014 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, \u98DE\u4E66, Calendar, Gmail, Drive, Sentry, Vercel, \u2026) and renders a single adaptive bento-grid dashboard at the top of "\u6211\u7684\u8BBE\u8BA1". Each connector module picks its own UI form (list, avatar stack, status ring, heatmap, file grid, alert card, \u2026) based on the data shape it returns, so the layout scales as Orbit's connector ecosystem grows. This skill should not be triggered manually \u2014 it is invoked by Orbit's daily-digest scheduler against the user's live connector data.`,
|
|
7519
|
-
"orbit-github": "Open Orbit briefing skill \u2014 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 requests, issues, CI runs, and merges from the user's authenticated GitHub connection and renders them in a layout that mirrors GitHub's native Notifications + PR-diff visual language. This skill should not be triggered manually \u2014 it is invoked by Orbit's daily-digest scheduler against live GitHub data.",
|
|
7520
|
-
"orbit-gmail": "Open Orbit briefing skill \u2014 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 (replies awaited, mentions, cc, auto- categorized bulk) from the user's authenticated Gmail connection and renders the digest as the Orbit Daily Digest email opened inside Gmail's reading view. This skill should not be triggered manually \u2014 it is invoked by Orbit's daily-digest scheduler against live Gmail data.",
|
|
7521
|
-
"orbit-linear": "Open Orbit briefing skill \u2014 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, status changes, assignments, and cycle progress from the user's authenticated Linear connection and renders the digest in Linear's native Inbox + cycle-progress visual language. This skill should not be triggered manually \u2014 it is invoked by Orbit's daily-digest scheduler against live Linear data.",
|
|
7522
|
-
"orbit-notion": "Open Orbit briefing skill \u2014 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, comments, mentions, and database row changes from the user's authenticated Notion connection and renders the digest as a native Notion page (callout / toggle / database table primitives). This skill should not be triggered manually \u2014 it is invoked by Orbit's daily-digest scheduler against live Notion data.",
|
|
7523
|
-
"pm-spec": 'Product spec / PRD as a single page \u2014 problem, success metrics, scope, user stories, design notes, rollout plan, open questions. Use when the brief mentions "PRD", "spec", "product spec", "feature brief", or "\u9700\u6C42\u6587\u6863".',
|
|
7524
|
-
"pricing-page": 'A standalone pricing page \u2014 header, plan tiers, feature comparison table, and an FAQ. Use when the brief asks for "pricing", "plans", "subscription tiers", or a "compare plans" page.',
|
|
7525
|
-
"replit-deck": `Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery. Eight distinct themes (helix, holm, vance, bevel, world-dark, world-mint, atlas, bluehouse) \u2014 each a complete visual system (palette + type + accent) captured from replit.com/slides. Pick one theme, do not mix. For pitch decks, board reports, brand memos, campaign reveals \u2014 when the user explicitly wants "Replit Slides style".`,
|
|
7526
|
-
"saas-landing": '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".',
|
|
7527
|
-
"simple-deck": "Single-file horizontal-swipe HTML deck. Built by copying the seed `assets/template.html` (which carries the proven 5-rule iframe nav script) and pasting slide layouts from `references/layouts.md`. Pitch decks, product overviews, study material \u2014 when you don't need the magazine aesthetic of `magazine-web-ppt`.",
|
|
7528
|
-
"social-carousel": 'A three-card social-media carousel laid out as 1080\xD71080 squares \u2014 three cinematic, on-brand panels with display headlines that connect across the series ("onwards." \u2192 "to the next one." \u2192 "looking ahead."). Each card has a brand mark, a number / total, a caption, and a "loop" affordance. Use when the brief asks for a "carousel post", "social carousel", "Instagram carousel", "LinkedIn series", "X thread cards", or "\u4E09\u8FDE\u53D1".',
|
|
7529
|
-
"social-media-dashboard": '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, a "top post this week" preview, and a trending topics / top comments side panel. Use when the brief mentions a "social media dashboard", "creator analytics", "social analytics", or names specific platforms (X, Twitter, LinkedIn, YouTube, Instagram, TikTok) together with metrics like followers, engagement, likes, reposts.',
|
|
7530
|
-
"social-media-matrix-tracker-template": "\u793E\u5A92\u77E9\u9635\u6570\u636E\u8FFD\u8E2A\u9762\u677F\u6A21\u677F\uFF08Social Media Matrix Tracker\uFF09\u3002 Use when users ask for a cinematic, data-dense social media analytics dashboard with multi-platform metrics, interactive charts, hover insights, range compare, and dark/light theme switching in a single HTML artifact.",
|
|
7531
|
-
"sprite-animation": 'A pixel / sprite-style animated explainer slide \u2014 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 ribbon. Reads like a single frame of an educational motion video \u2014 looping CSS keyframes, no JS, ready to be screen-recorded into a vertical video. Use when the brief asks for a "sprite animation", "pixel-art video", "8-bit explainer", "history of X explainer", "kinetic typography history", "Nintendo-style", "\u7CBE\u7075\u56FE\u52A8\u753B", "\u50CF\u7D20\u52A8\u753B", or "\u590D\u53E4\u52A8\u753B".',
|
|
7532
|
-
"team-okrs": 'OKR tracker page \u2014 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", "objectives", or "\u76EE\u6807".',
|
|
7533
|
-
"trading-analysis-dashboard-template": "Professional trading analysis dashboard template (single-file HTML) with light/dark theme switch, dense market panels, chart interactions, demo/live playback, and command palette behavior. Use when users ask for a Wall-Street-style analytics terminal, trading cockpit, or high-tech financial dashboard template with realistic data layout.",
|
|
7534
|
-
tweaks: 'Wrap any HTML artifact with a side panel of live, parameterized controls \u2014 accent color, type scale, density, motion, theme \u2014 that rewrite CSS custom properties in real time and persist to localStorage. Lets the user explore variants of a design without re-prompting the agent. Use when the brief asks for "variants", "side-by-side options", "tweak this", "let me adjust", "live knobs", or "\u5B9E\u65F6\u8C03\u53C2".',
|
|
7535
|
-
"video-shortform": "Short-form video generation skill \u2014 3-10 second clips for product reveals, motion teasers, ambient loops. Defaults to Seedance 2 but works the same with Kling 3 / 4, Veo 3 or Sora 2. Output is one MP4 saved to the project folder. When the workspace also ships an interactive-video / hyperframes skill, prefer composing several short shots into a single timeline rather than one long monolithic clip.",
|
|
7536
|
-
"waitlist-page": "Minimal pre-launch landing with email capture, brand logo, and optional decorative layer. Reads DESIGN.md for colors, typography, and layout rules. Best for: product launches, beta signups, early access programs, indie projects.",
|
|
7537
|
-
"web-prototype": "General-purpose desktop web prototype. Single self-contained HTML file built by copying the seed `assets/template.html` and pasting section layouts from `references/layouts.md`. Default for any landing / marketing / docs / SaaS page when no more specific skill matches.",
|
|
7538
|
-
"web-prototype-taste-brutalist": "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).",
|
|
7539
|
-
"web-prototype-taste-soft": "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\u20138 of `taste-skill`.",
|
|
7540
|
-
"wireframe-sketch": `A hand-drawn wireframe exploration \u2014 graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations, scribbled chart placeholders, hatched fills. Reads like a designer's whiteboard before any pixels are committed. Use when the brief asks for "wireframe", "sketch wireframe", "hand-drawn", "lo-fi", "whiteboard", "\u8349\u7A3F", or "\u624B\u7ED8\u539F\u578B".`,
|
|
7541
|
-
"x-research": "X/Twitter public sentiment research for recent market, company, product, or community discourse. Use when the brief asks what people are saying on X, Twitter sentiment, CT sentiment, public opinion, expert posts, or social reaction around a stock, sector, company, product, or market event."
|
|
7542
|
-
};
|
|
7543
|
-
var ADDITIONAL_OPEN_DESIGN_DESIGN_SYSTEM_DESCRIPTIONS = {
|
|
7544
|
-
agentic: "Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.",
|
|
7545
|
-
airbnb: "Travel marketplace. Warm coral accent, photography-driven, rounded UI.",
|
|
7546
|
-
airtable: "Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic.",
|
|
7547
|
-
ant: "Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.",
|
|
7548
|
-
application: "App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.",
|
|
7549
|
-
arc: '"The browser that browses for you." Translucent surfaces, gradient warmth, sidebar-first layout.',
|
|
7550
|
-
artistic: "High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.",
|
|
7551
|
-
"atelier-zero": "A magazine-grade, collage-driven visual system: warm paper canvas, surreal",
|
|
7552
|
-
bento: "Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.",
|
|
7553
|
-
binance: "Crypto exchange. Bold yellow accent on monochrome, trading-floor urgency.",
|
|
7554
|
-
bmw: "Luxury automotive. Dark premium surfaces, precise German engineering aesthetic.",
|
|
7555
|
-
"bmw-m": "Motorsport performance sub-brand. Near-black cockpit surfaces, BMW M tricolor accents, sharp engineering geometry.",
|
|
7556
|
-
bold: "Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.",
|
|
7557
|
-
brutalism: "Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.",
|
|
7558
|
-
bugatti: "Hypercar brand. Cinema-black canvas, monochrome austerity, monumental display type.",
|
|
7559
|
-
cafe: "Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.",
|
|
7560
|
-
cal: "Open-source scheduling. Clean neutral UI, developer-oriented simplicity.",
|
|
7561
|
-
canva: "Visual creation platform. Vivid purple-blue gradient, generous spacing, friendly geometry.",
|
|
7562
|
-
cisco: "Enterprise infrastructure brand. Dark trust surfaces, Cisco Blue signal, technical clarity.",
|
|
7563
|
-
claude: "Anthropic's AI assistant. Warm terracotta accent, clean editorial layout.",
|
|
7564
|
-
clay: "Creative agency. Organic shapes, soft gradients, art-directed layout.",
|
|
7565
|
-
claymorphism: "Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.",
|
|
7566
|
-
clean: "Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.",
|
|
7567
|
-
clickhouse: "Fast analytics database. Yellow-accented, technical documentation style.",
|
|
7568
|
-
cohere: "Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic.",
|
|
7569
|
-
coinbase: "Crypto exchange. Clean blue identity, trust-focused, institutional feel.",
|
|
7570
|
-
colorful: "Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.",
|
|
7571
|
-
composio: "Tool integration platform. Modern dark with colorful integration icons.",
|
|
7572
|
-
contemporary: "Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.",
|
|
7573
|
-
corporate: "Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.",
|
|
7574
|
-
cosmic: "Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.",
|
|
7575
|
-
creative: "Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.",
|
|
7576
|
-
cursor: "AI-first code editor. Sleek dark interface, gradient accents.",
|
|
7577
|
-
default: "A clean, product-oriented default. Use when the brief doesn't call for a",
|
|
7578
|
-
discord: "Voice / chat platform. Deep blurple, dark-first surfaces, playful accent moments.",
|
|
7579
|
-
dithered: "Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.",
|
|
7580
|
-
doodle: "Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.",
|
|
7581
|
-
dramatic: "High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.",
|
|
7582
|
-
duolingo: "Language-learning platform. Bright owl green, chunky shadows, gamified joy.",
|
|
7583
|
-
elegant: "Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication.",
|
|
7584
|
-
elevenlabs: "AI voice platform. Dark cinematic UI, audio-waveform aesthetics.",
|
|
7585
|
-
energetic: "Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.",
|
|
7586
|
-
enterprise: "Clean, high-contrast enterprise design for data-driven workflows with intuitive drag-and-drop patterns and structured layouts.",
|
|
7587
|
-
expo: "React Native platform. Dark theme, tight letter-spacing, code-centric.",
|
|
7588
|
-
expressive: "Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.",
|
|
7589
|
-
fantasy: "Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.",
|
|
7590
|
-
ferrari: "Luxury automotive. Chiaroscuro editorial, Ferrari Red accents, cinematic black.",
|
|
7591
|
-
figma: "Collaborative design tool. Vibrant multi-color, playful yet professional.",
|
|
7592
|
-
flat: "Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.",
|
|
7593
|
-
framer: "Website builder. Bold black and blue, motion-first, design-forward.",
|
|
7594
|
-
friendly: "Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.",
|
|
7595
|
-
futuristic: "Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.",
|
|
7596
|
-
github: "Code-forward platform. Functional density, blue-on-white precision, Primer foundations.",
|
|
7597
|
-
glassmorphism: "Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.",
|
|
7598
|
-
gradient: "Smooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth.",
|
|
7599
|
-
hashicorp: "Infrastructure automation. Enterprise-clean, black and white.",
|
|
7600
|
-
hud: "Fighter jet / helicopter head-up display. Phosphor green on near-black, all-caps data overlays, angular geometry. Zero ambiguity at speed and altitude.",
|
|
7601
|
-
huggingface: "ML community hub. Sunny yellow accent, monospace identity, cheerful and dense.",
|
|
7602
|
-
ibm: "Enterprise technology. Carbon design system, structured blue palette.",
|
|
7603
|
-
intercom: "Customer messaging. Friendly blue palette, conversational UI patterns.",
|
|
7604
|
-
kami: "Editorial paper system: warm parchment canvas, ink-blue accent, serif-led hierarchy. Built for resumes, one-pagers, white papers, portfolios, slide decks \u2014 anything that should feel like high-quality print rather than UI. Multilingual by design (EN \xB7 zh-CN \xB7 ja).",
|
|
7605
|
-
kraken: "Crypto trading. Purple-accented dark UI, data-dense dashboards.",
|
|
7606
|
-
lamborghini: "Supercar brand. True black surfaces, gold accents, dramatic uppercase typography.",
|
|
7607
|
-
levels: "Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed.",
|
|
7608
|
-
"linear-app": "Project management. Ultra-minimal, precise, purple accent.",
|
|
7609
|
-
lingo: "Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.",
|
|
7610
|
-
loom: "Loom async video. Purple primary, friendly surfaces, video-first layout. Clean and professional without being corporate.",
|
|
7611
|
-
lovable: "AI full-stack builder. Playful gradients, friendly dev aesthetic.",
|
|
7612
|
-
luxury: "High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for luxury brand experiences.",
|
|
7613
|
-
mastercard: "Global payments network. Warm cream canvas, orbital pill shapes, editorial warmth.",
|
|
7614
|
-
material: "Google's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns.",
|
|
7615
|
-
meta: "Tech retail store. Photography-first, binary light/dark surfaces, Meta Blue CTAs.",
|
|
7616
|
-
minimal: "Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.",
|
|
7617
|
-
minimax: "AI model provider. Bold dark interface with neon accents.",
|
|
7618
|
-
mintlify: "Documentation platform. Clean, green-accented, reading-optimized.",
|
|
7619
|
-
miro: "Visual collaboration. Bright yellow accent, infinite canvas aesthetic.",
|
|
7620
|
-
"mission-control": "Space/aerospace mission monitoring. Dark command center, amber telemetry, monospace precision. Functional clarity above all else.",
|
|
7621
|
-
"mistral-ai": "Open-weight LLM provider. French-engineered minimalism, purple-toned.",
|
|
7622
|
-
modern: "Contemporary editorial style with serif typography, minimal palettes, and clean layouts for polished digital products.",
|
|
7623
|
-
mongodb: "Document database. Green leaf branding, developer documentation focus.",
|
|
7624
|
-
neobrutalism: "Modern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces.",
|
|
7625
|
-
neon: "Electric neon glow effects with high-contrast color pairings for bold, attention-grabbing interfaces.",
|
|
7626
|
-
neumorphism: "Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.",
|
|
7627
|
-
nike: "Athletic retail. Monochrome UI, massive uppercase type, full-bleed photography.",
|
|
7628
|
-
notion: "All-in-one workspace. Warm minimalism, serif headings, soft surfaces.",
|
|
7629
|
-
nvidia: "GPU computing. Green-black energy, technical power aesthetic.",
|
|
7630
|
-
ollama: "Run LLMs locally. Terminal-first, monochrome simplicity.",
|
|
7631
|
-
openai: "Calm, near-monochrome system anchored in deep teal-black with generous white space and editorial typography.",
|
|
7632
|
-
"opencode-ai": "AI coding platform. Developer-centric dark theme.",
|
|
7633
|
-
pacman: "Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.",
|
|
7634
|
-
paper: "Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.",
|
|
7635
|
-
perplexity: "Conversational AI search engine. Deep-dark canvas, sharp typography, single violet accent, dense information hierarchy.",
|
|
7636
|
-
perspective: "Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.",
|
|
7637
|
-
pinterest: "Visual discovery. Red accent, masonry grid, image-first.",
|
|
7638
|
-
playstation: "Gaming console retail. Three-surface channel layout, quiet-authority display type, cyan hover-scale.",
|
|
7639
|
-
posthog: "Product analytics. Playful hedgehog branding, developer-friendly dark UI.",
|
|
7640
|
-
premium: "Apple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language.",
|
|
7641
|
-
professional: "Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.",
|
|
7642
|
-
publication: "Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.",
|
|
7643
|
-
raycast: "Productivity launcher. Sleek dark chrome, vibrant gradient accents.",
|
|
7644
|
-
refined: "Carefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes.",
|
|
7645
|
-
renault: "French automotive. Vibrant aurora gradients, NouvelR typography, bold energy.",
|
|
7646
|
-
replicate: "Run ML models via API. Clean white canvas, code-forward.",
|
|
7647
|
-
resend: "Email API. Minimal dark theme, monospace accents.",
|
|
7648
|
-
retro: "Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.",
|
|
7649
|
-
revolut: "Digital banking. Sleek dark interface, gradient cards, fintech precision.",
|
|
7650
|
-
runwayml: "AI video generation. Cinematic dark UI, media-rich layout.",
|
|
7651
|
-
sanity: "Headless CMS. Red accent, content-first editorial layout.",
|
|
7652
|
-
sentry: "Error monitoring. Dark dashboard, data-dense, pink-purple accent.",
|
|
7653
|
-
shadcn: "Shadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns.",
|
|
7654
|
-
shopify: "E-commerce platform. Dark-first cinematic, neon green accent, ultra-light type.",
|
|
7655
|
-
simple: "Straightforward, no-frills design with clean typography, neutral colors, and intuitive layouts that stay out of the way.",
|
|
7656
|
-
skeumorphism: "Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces.",
|
|
7657
|
-
slack: "Workplace communication platform. Aubergine-primary, multi-accent logo palette, light surfaces with dark sidebar, warm and approachable.",
|
|
7658
|
-
sleek: "Modern minimalist aesthetic with clean lines, intentional color palette, subtle interactions, and consistent spacing.",
|
|
7659
|
-
spacex: "Space technology. Stark black and white, full-bleed imagery, futuristic.",
|
|
7660
|
-
spacious: "Generous whitespace, consistent padding, and grid-based layouts for clean, readable, and breathing interfaces.",
|
|
7661
|
-
spotify: "Music streaming. Vibrant green on dark, bold type, album-art-driven.",
|
|
7662
|
-
starbucks: "Global coffee retail brand. Four-tier green system, warm cream canvas, full-pill buttons.",
|
|
7663
|
-
storytelling: "Narrative-driven design using visuals, copy, and interaction to guide users through engaging, emotionally resonant journeys.",
|
|
7664
|
-
stripe: "Payment infrastructure. Signature purple gradients, weight-300 elegance.",
|
|
7665
|
-
supabase: "Open-source Firebase alternative. Dark emerald theme, code-first.",
|
|
7666
|
-
superhuman: "Fast email client. Premium dark UI, keyboard-first, purple glow.",
|
|
7667
|
-
tesla: "Electric automotive. Radical subtraction, full-viewport photography, near-zero UI.",
|
|
7668
|
-
tetris: "Classic block-game inspired design with playful colors, bold display fonts, and compact, high-energy layouts.",
|
|
7669
|
-
theverge: "Tech editorial media. Acid-mint and ultraviolet accents, Manuka display, rave-flyer story tiles.",
|
|
7670
|
-
"together-ai": "Open-source AI infrastructure. Technical, blueprint-style design.",
|
|
7671
|
-
"totality-festival": 'A cosmic-premium, glassmorphic dark system that captures the visceral awe of a solar eclipse \u2014 obsidian surfaces, amber "corona" highlights, and cyan atmospheric accents.',
|
|
7672
|
-
uber: "Mobility platform. Bold black and white, tight type, urban energy.",
|
|
7673
|
-
urdu: "Urdu-first digital experiences with native RTL support,Nastaliq typography, and bilingual harmony.",
|
|
7674
|
-
vercel: "Frontend deployment. Black and white precision, Geist font.",
|
|
7675
|
-
vibrant: "Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.",
|
|
7676
|
-
vintage: "1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.",
|
|
7677
|
-
vodafone: "Global telecom brand. Monumental uppercase display, Vodafone Red chapter bands.",
|
|
7678
|
-
voltagent: "AI agent framework. Void-black canvas, emerald accent, terminal-native.",
|
|
7679
|
-
warp: "Modern terminal. Dark IDE-like interface, block-based command UI.",
|
|
7680
|
-
webex: "Collaboration platform. Momentum typography, blue action system, multi-user accent spectrum.",
|
|
7681
|
-
webflow: "Visual web builder. Blue-accented, polished marketing site aesthetic.",
|
|
7682
|
-
wechat: "Brand visual language for WeChat Mini Programs, official accounts, and open ecosystem extensions.",
|
|
7683
|
-
wired: "Tech magazine. Paper-white broadsheet density, custom serif display, mono kickers, ink-blue links.",
|
|
7684
|
-
wise: "Money transfer. Bright green accent, friendly and clear.",
|
|
7685
|
-
"x-ai": "Elon Musk's AI lab. Stark monochrome, futuristic minimalism.",
|
|
7686
|
-
xiaohongshu: "Lifestyle UGC social platform. Singular brand red, generous radius, content-first.",
|
|
7687
|
-
zapier: "Automation platform. Warm orange, friendly illustration-driven."
|
|
7688
|
-
};
|
|
7689
|
-
var OPEN_DESIGN_SKILL_ACRONYMS = /* @__PURE__ */ new Set([
|
|
7690
|
-
"ai",
|
|
7691
|
-
"css",
|
|
7692
|
-
"d3",
|
|
7693
|
-
"doc",
|
|
7694
|
-
"docx",
|
|
7695
|
-
"faq",
|
|
7696
|
-
"gif",
|
|
7697
|
-
"gsap",
|
|
7698
|
-
"hig",
|
|
7699
|
-
"html",
|
|
7700
|
-
"md",
|
|
7701
|
-
"pdf",
|
|
7702
|
-
"ppt",
|
|
7703
|
-
"pptx",
|
|
7704
|
-
"ui",
|
|
7705
|
-
"ux",
|
|
7706
|
-
"vfx",
|
|
7707
|
-
"wpds"
|
|
7708
|
-
]);
|
|
7709
|
-
function titleCaseOpenDesignSlug(slug) {
|
|
7710
|
-
return slug.split("-").map((part) => {
|
|
7711
|
-
if (OPEN_DESIGN_SKILL_ACRONYMS.has(part)) {
|
|
7712
|
-
return part.toUpperCase();
|
|
7713
|
-
}
|
|
7714
|
-
if (/^[0-9]+d$/u.test(part)) {
|
|
7715
|
-
return part.toUpperCase();
|
|
7716
|
-
}
|
|
7717
|
-
return `${part.charAt(0).toUpperCase()}${part.slice(1)}`;
|
|
7718
|
-
}).join(" ");
|
|
7719
|
-
}
|
|
7720
|
-
function addTarget(targets, target) {
|
|
7721
|
-
if (!targets.includes(target)) {
|
|
7722
|
-
targets.push(target);
|
|
7723
|
-
}
|
|
7724
|
-
}
|
|
7725
|
-
function inferOpenDesignSkillTargets(slug) {
|
|
7726
|
-
const targets = [];
|
|
7727
|
-
if (/video|remotion|sora|kling|lip|youtube|gif|stitch|hyperframes|orbit|speech|audio|music/u.test(
|
|
7728
|
-
slug
|
|
7729
|
-
)) {
|
|
7730
|
-
addTarget(targets, "intro-video");
|
|
7731
|
-
}
|
|
7732
|
-
if (/ppt|pptx|slides|deck|keynote|presentation/u.test(slug)) {
|
|
7733
|
-
addTarget(targets, "presentation");
|
|
7734
|
-
}
|
|
7735
|
-
if (/image|imagen|photo|illustration|poster|card|screenshot|frame|mockup|art|canvas|sticker|tryon|visual|creative|social|twitter|xiaohongshu/u.test(
|
|
7736
|
-
slug
|
|
7737
|
-
)) {
|
|
7738
|
-
addTarget(targets, "image");
|
|
7739
|
-
addTarget(targets, "poster");
|
|
7740
|
-
addTarget(targets, "website");
|
|
7741
|
-
addTarget(targets, "presentation");
|
|
7742
|
-
}
|
|
7743
|
-
if (/frontend|ui|ux|web|website|shadcn|three|gsap|shader|flutter|swift|app|login|paywall|figma|platform|browser/u.test(
|
|
7744
|
-
slug
|
|
7745
|
-
)) {
|
|
7746
|
-
addTarget(targets, "website");
|
|
7747
|
-
addTarget(targets, "mobile-app-design");
|
|
7748
|
-
addTarget(targets, "dashboard-design");
|
|
7749
|
-
}
|
|
7750
|
-
if (/doc|pdf|docx|report|article|copy|brand|brief|resume|faq|research|notes|markdown|release|guidelines|review/u.test(
|
|
7751
|
-
slug
|
|
7752
|
-
)) {
|
|
7753
|
-
addTarget(targets, "report");
|
|
7754
|
-
addTarget(targets, "docs-design");
|
|
7755
|
-
addTarget(targets, "website");
|
|
7756
|
-
addTarget(targets, "presentation");
|
|
7757
|
-
}
|
|
7758
|
-
if (targets.length === 0) {
|
|
7759
|
-
return ["presentation", "website", "poster", "report", "docs-design"];
|
|
7760
|
-
}
|
|
7761
|
-
return targets;
|
|
7762
|
-
}
|
|
7763
|
-
function inferOpenDesignSkillOutputKinds(slug) {
|
|
7764
|
-
const outputKinds = [];
|
|
7765
|
-
if (/image|imagen|photo|illustration|poster|card|screenshot|frame|mockup|art|canvas|sticker|tryon|visual/u.test(
|
|
7766
|
-
slug
|
|
7767
|
-
)) {
|
|
7768
|
-
outputKinds.push("image");
|
|
7769
|
-
}
|
|
7770
|
-
if (/video|remotion|sora|kling|lip|youtube|gif|stitch|hyperframes|orbit/u.test(
|
|
7771
|
-
slug
|
|
7772
|
-
)) {
|
|
7773
|
-
outputKinds.push("video");
|
|
7774
|
-
}
|
|
7775
|
-
if (/audio|speech|music/u.test(slug)) {
|
|
7776
|
-
outputKinds.push("audio");
|
|
7777
|
-
}
|
|
7778
|
-
if (/ppt|pptx|slides|deck|keynote|presentation/u.test(slug)) {
|
|
7779
|
-
outputKinds.push("presentation");
|
|
7780
|
-
}
|
|
7781
|
-
return outputKinds.length > 0 ? outputKinds : void 0;
|
|
7782
|
-
}
|
|
7783
|
-
function createOpenDesignSkillEntry(slug) {
|
|
7784
|
-
const name = titleCaseOpenDesignSlug(slug);
|
|
7785
|
-
const outputKinds = inferOpenDesignSkillOutputKinds(slug);
|
|
7786
|
-
const primaryOutputKind = outputKinds?.[0];
|
|
7787
|
-
return {
|
|
7788
|
-
id: `od:skill:${slug}`,
|
|
7789
|
-
kind: "skill",
|
|
7790
|
-
name,
|
|
7791
|
-
description: STYLE_OPEN_DESIGN_SKILL_DESCRIPTIONS[slug],
|
|
7792
|
-
source: source(`skills/${slug}/SKILL.md`),
|
|
7793
|
-
targets: inferOpenDesignSkillTargets(slug),
|
|
7794
|
-
tags: slug.split("-").filter((tag) => {
|
|
7795
|
-
return tag.length > 1;
|
|
7796
|
-
}),
|
|
7797
|
-
triggers: [slug, name.toLowerCase()],
|
|
7798
|
-
...outputKinds && primaryOutputKind ? {
|
|
7799
|
-
outputKinds,
|
|
7800
|
-
primaryOutputKind
|
|
7801
|
-
} : {},
|
|
7802
|
-
executorHints: ["skill-authored"],
|
|
7803
|
-
status: "experimental",
|
|
7804
|
-
priority: -90
|
|
7805
|
-
};
|
|
7806
|
-
}
|
|
7807
|
-
function inferOpenDesignTemplateTargets(slug) {
|
|
7808
|
-
const targets = [];
|
|
7809
|
-
if (/mobile|phone|app|onboarding|gamified/u.test(slug)) {
|
|
7810
|
-
addTarget(targets, "mobile-app-design");
|
|
7811
|
-
}
|
|
7812
|
-
if (/dashboard|admin|kanban|tracker|matrix|orbit|analytics/u.test(slug)) {
|
|
7813
|
-
addTarget(targets, "dashboard-design");
|
|
7814
|
-
addTarget(targets, "website");
|
|
7815
|
-
}
|
|
7816
|
-
if (/ppt|deck|slides|presentation|keynote/u.test(slug)) {
|
|
7817
|
-
addTarget(targets, "presentation");
|
|
7818
|
-
}
|
|
7819
|
-
if (/poster|image|sprite|wireframe|carousel|social|xhs|motion|video/u.test(slug)) {
|
|
7820
|
-
addTarget(targets, "image");
|
|
7821
|
-
addTarget(targets, "poster");
|
|
7822
|
-
addTarget(targets, "website");
|
|
7823
|
-
}
|
|
7824
|
-
if (/docs|doc|report|runbook|spec|invoice|email|notes|blog|guide|case/u.test(
|
|
7825
|
-
slug
|
|
7826
|
-
)) {
|
|
7827
|
-
addTarget(targets, "report");
|
|
7828
|
-
addTarget(targets, "docs-design");
|
|
7829
|
-
addTarget(targets, "website");
|
|
7830
|
-
}
|
|
7831
|
-
if (targets.length === 0) {
|
|
7832
|
-
return ["website", "presentation", "report"];
|
|
7833
|
-
}
|
|
7834
|
-
return targets;
|
|
7835
|
-
}
|
|
7836
|
-
function createOpenDesignTemplateEntry(slug, description) {
|
|
7837
|
-
const name = titleCaseOpenDesignSlug(slug);
|
|
7838
|
-
return {
|
|
7839
|
-
id: `od:template:${slug}`,
|
|
7840
|
-
kind: "template",
|
|
7841
|
-
name,
|
|
7842
|
-
description,
|
|
7843
|
-
source: source(`design-templates/${slug}`),
|
|
7844
|
-
targets: inferOpenDesignTemplateTargets(slug),
|
|
7845
|
-
tags: slug.split("-").filter((tag) => {
|
|
7846
|
-
return tag.length > 1;
|
|
7847
|
-
}),
|
|
7848
|
-
triggers: [slug, name.toLowerCase()],
|
|
7849
|
-
status: "experimental",
|
|
7850
|
-
priority: -90
|
|
7851
|
-
};
|
|
7852
|
-
}
|
|
7853
|
-
function createOpenDesignDesignSystemEntry(slug, description) {
|
|
7854
|
-
const name = titleCaseOpenDesignSlug(slug);
|
|
7855
|
-
return {
|
|
7856
|
-
id: `od:design-system:${slug}`,
|
|
7857
|
-
kind: "design-system",
|
|
7858
|
-
name,
|
|
7859
|
-
description,
|
|
7860
|
-
source: source(`design-systems/${slug}`),
|
|
7861
|
-
targets: [
|
|
7862
|
-
"presentation",
|
|
7863
|
-
"website",
|
|
7864
|
-
"dashboard-design",
|
|
7865
|
-
"mobile-app-design",
|
|
7866
|
-
"poster",
|
|
7867
|
-
"report",
|
|
7868
|
-
"docs-design"
|
|
7869
|
-
],
|
|
7870
|
-
tags: slug.split("-").filter((tag) => {
|
|
7871
|
-
return tag.length > 1;
|
|
7872
|
-
}),
|
|
7873
|
-
triggers: [slug, name.toLowerCase()],
|
|
7874
|
-
status: "experimental",
|
|
7875
|
-
priority: -90
|
|
7876
|
-
};
|
|
7877
|
-
}
|
|
7878
7269
|
var OPEN_DESIGN_REGISTRY = [
|
|
7879
7270
|
{
|
|
7880
|
-
id: "od:skill:article-magazine",
|
|
7881
|
-
kind: "skill",
|
|
7882
|
-
name: "Article Magazine",
|
|
7883
|
-
description: "Shapes research or editorial material into a magazine-like narrative with strong hierarchy.",
|
|
7884
|
-
source:
|
|
7885
|
-
|
|
7886
|
-
|
|
7887
|
-
|
|
7888
|
-
|
|
7889
|
-
|
|
7890
|
-
|
|
7891
|
-
|
|
7892
|
-
|
|
7893
|
-
|
|
7894
|
-
|
|
7271
|
+
id: "od:skill:article-magazine",
|
|
7272
|
+
kind: "skill",
|
|
7273
|
+
name: "Article Magazine",
|
|
7274
|
+
description: "Shapes research or editorial material into a magazine-like narrative with strong hierarchy.",
|
|
7275
|
+
source: { path: "skills/article-magazine/SKILL.md" }
|
|
7276
|
+
},
|
|
7277
|
+
{
|
|
7278
|
+
id: "od:skill:design-brief",
|
|
7279
|
+
kind: "skill",
|
|
7280
|
+
name: "Design Brief",
|
|
7281
|
+
description: "Converts a product, brand, or feature request into a structured design brief.",
|
|
7282
|
+
source: { path: "skills/design-brief/SKILL.md" }
|
|
7283
|
+
},
|
|
7284
|
+
{
|
|
7285
|
+
id: "od:skill:8-bit-orbit-video-template",
|
|
7286
|
+
kind: "skill",
|
|
7287
|
+
name: "8 Bit Orbit Video Template",
|
|
7288
|
+
description: "HyperFrames-based video template for retro pixel deck motion design \u2014 multi-scene HTML-to-video composition with advanced transitions and ready-to-render default style.",
|
|
7289
|
+
source: { path: "skills/8-bit-orbit-video-template/SKILL.md" }
|
|
7290
|
+
},
|
|
7291
|
+
{
|
|
7292
|
+
id: "od:skill:after-hours-editorial-template",
|
|
7293
|
+
kind: "skill",
|
|
7294
|
+
name: "After Hours Editorial Template",
|
|
7295
|
+
description: "Luxury dark-editorial HyperFrames template for three-page cinematic storyboards \u2014 haute couture title cards and magazine chapter spreads with moody serif-led storytelling.",
|
|
7296
|
+
source: { path: "skills/after-hours-editorial-template/SKILL.md" }
|
|
7297
|
+
},
|
|
7298
|
+
{
|
|
7299
|
+
id: "od:skill:algorithmic-art",
|
|
7300
|
+
kind: "skill",
|
|
7301
|
+
name: "Algorithmic Art",
|
|
7302
|
+
description: "Create generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame studies.",
|
|
7303
|
+
source: { path: "skills/algorithmic-art/SKILL.md" }
|
|
7304
|
+
},
|
|
7305
|
+
{
|
|
7306
|
+
id: "od:skill:apple-hig",
|
|
7307
|
+
kind: "skill",
|
|
7308
|
+
name: "Apple HIG",
|
|
7309
|
+
description: "Apple Human Interface Guidelines as 14 agent skills covering platforms, foundations, components, patterns, inputs, and technologies for iOS, macOS, visionOS, watchOS, and tvOS.",
|
|
7310
|
+
source: { path: "skills/apple-hig/SKILL.md" }
|
|
7311
|
+
},
|
|
7312
|
+
{
|
|
7313
|
+
id: "od:skill:brainstorming",
|
|
7314
|
+
kind: "skill",
|
|
7315
|
+
name: "Brainstorming",
|
|
7316
|
+
description: "Transform rough ideas into fully-formed designs through structured questioning and alternative exploration. Useful early in concept work.",
|
|
7317
|
+
source: { path: "skills/brainstorming/SKILL.md" }
|
|
7318
|
+
},
|
|
7319
|
+
{
|
|
7320
|
+
id: "od:skill:brand-guidelines",
|
|
7321
|
+
kind: "skill",
|
|
7322
|
+
name: "Brand Guidelines",
|
|
7323
|
+
description: "Apply Anthropic's official brand colors and typography to artifacts for consistent visual identity and professional design standards. A reference for shaping your own.",
|
|
7324
|
+
source: { path: "skills/brand-guidelines/SKILL.md" }
|
|
7325
|
+
},
|
|
7326
|
+
{
|
|
7327
|
+
id: "od:skill:canvas-design",
|
|
7328
|
+
kind: "skill",
|
|
7329
|
+
name: "Canvas Design",
|
|
7330
|
+
description: "Create beautiful visual art in PNG and PDF documents using design philosophy and aesthetic principles for posters, illustrations, and static pieces.",
|
|
7331
|
+
source: { path: "skills/canvas-design/SKILL.md" }
|
|
7332
|
+
},
|
|
7333
|
+
{
|
|
7334
|
+
id: "od:skill:card-twitter",
|
|
7335
|
+
kind: "skill",
|
|
7336
|
+
name: "Card Twitter",
|
|
7337
|
+
description: "Twitter quote or data card designed to pair with a post.",
|
|
7338
|
+
source: { path: "skills/card-twitter/SKILL.md" }
|
|
7339
|
+
},
|
|
7340
|
+
{
|
|
7341
|
+
id: "od:skill:card-xiaohongshu",
|
|
7342
|
+
kind: "skill",
|
|
7343
|
+
name: "Card Xiaohongshu",
|
|
7344
|
+
description: "Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.",
|
|
7345
|
+
source: { path: "skills/card-xiaohongshu/SKILL.md" }
|
|
7346
|
+
},
|
|
7347
|
+
{
|
|
7348
|
+
id: "od:skill:color-expert",
|
|
7349
|
+
kind: "skill",
|
|
7350
|
+
name: "Color Expert",
|
|
7351
|
+
description: "Color science expert skill with 286K words of reference material covering OKLCH/OKLAB, palette generation, accessibility/contrast, color naming, pigment mixing, and historical color theory.",
|
|
7352
|
+
source: { path: "skills/color-expert/SKILL.md" }
|
|
7353
|
+
},
|
|
7354
|
+
{
|
|
7355
|
+
id: "od:skill:creative-director",
|
|
7356
|
+
kind: "skill",
|
|
7357
|
+
name: "Creative Director",
|
|
7358
|
+
description: "AI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation.",
|
|
7359
|
+
source: { path: "skills/creative-director/SKILL.md" }
|
|
7360
|
+
},
|
|
7361
|
+
{
|
|
7362
|
+
id: "od:skill:d3-visualization",
|
|
7363
|
+
kind: "skill",
|
|
7364
|
+
name: "D3 Visualization",
|
|
7365
|
+
description: "Teaches the agent to produce D3 charts and interactive data visualizations. Useful for editorial dashboards, reports, and explanatory graphics.",
|
|
7366
|
+
source: { path: "skills/d3-visualization/SKILL.md" }
|
|
7367
|
+
},
|
|
7368
|
+
{
|
|
7369
|
+
id: "od:skill:deck-guizang-editorial",
|
|
7370
|
+
kind: "skill",
|
|
7371
|
+
name: "Deck Guizang Editorial",
|
|
7372
|
+
description: "Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune).",
|
|
7373
|
+
source: { path: "skills/deck-guizang-editorial/SKILL.md" }
|
|
7374
|
+
},
|
|
7375
|
+
{
|
|
7376
|
+
id: "od:skill:deck-open-slide-canvas",
|
|
7377
|
+
kind: "skill",
|
|
7378
|
+
name: "Deck Open Slide Canvas",
|
|
7379
|
+
description: "Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.",
|
|
7380
|
+
source: { path: "skills/deck-open-slide-canvas/SKILL.md" }
|
|
7381
|
+
},
|
|
7382
|
+
{
|
|
7383
|
+
id: "od:skill:deck-swiss-international",
|
|
7384
|
+
kind: "skill",
|
|
7385
|
+
name: "Deck Swiss International",
|
|
7386
|
+
description: "16-column grid, one saturated accent, and 22 locked layouts (Klein Blue, Lemon, Mint, Safety Orange).",
|
|
7387
|
+
source: { path: "skills/deck-swiss-international/SKILL.md" }
|
|
7388
|
+
},
|
|
7389
|
+
{
|
|
7390
|
+
id: "od:skill:design-consultation",
|
|
7391
|
+
kind: "skill",
|
|
7392
|
+
name: "Design Consultation",
|
|
7393
|
+
description: "Build a complete design system from scratch with creative risks and realistic product mockups. Useful for kickoff workshops and brand-from-zero work.",
|
|
7394
|
+
source: { path: "skills/design-consultation/SKILL.md" }
|
|
7395
|
+
},
|
|
7396
|
+
{
|
|
7397
|
+
id: "od:skill:design-md",
|
|
7398
|
+
kind: "skill",
|
|
7399
|
+
name: "Design MD",
|
|
7400
|
+
description: "Create and manage DESIGN.md files. Useful for capturing design direction, tokens, and visual rules in a single source of truth.",
|
|
7401
|
+
source: { path: "skills/design-md/SKILL.md" }
|
|
7402
|
+
},
|
|
7403
|
+
{
|
|
7404
|
+
id: "od:skill:design-review",
|
|
7405
|
+
kind: "skill",
|
|
7406
|
+
name: "Design Review",
|
|
7407
|
+
description: "Designer Who Codes: visual audit then fixes with atomic commits and before/after screenshots. Useful for tightening shipped UI before launch.",
|
|
7408
|
+
source: { path: "skills/design-review/SKILL.md" }
|
|
7409
|
+
},
|
|
7410
|
+
{
|
|
7411
|
+
id: "od:skill:digits-fintech-swiss-template",
|
|
7412
|
+
kind: "skill",
|
|
7413
|
+
name: "Digits Fintech Swiss Template",
|
|
7414
|
+
description: "Swiss-grid fintech deck template in black / warm paper / neon-lime \u2014 strict modular layout, bold numeric cards, restrained motion, keyboard/click navigation.",
|
|
7415
|
+
source: { path: "skills/digits-fintech-swiss-template/SKILL.md" }
|
|
7416
|
+
},
|
|
7417
|
+
{
|
|
7418
|
+
id: "od:skill:doc-kami-parchment",
|
|
7419
|
+
kind: "skill",
|
|
7420
|
+
name: "DOC Kami Parchment",
|
|
7421
|
+
description: "Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.",
|
|
7422
|
+
source: { path: "skills/doc-kami-parchment/SKILL.md" }
|
|
7423
|
+
},
|
|
7424
|
+
{
|
|
7425
|
+
id: "od:skill:editorial-burgundy-principles-template",
|
|
7426
|
+
kind: "skill",
|
|
7427
|
+
name: "Editorial Burgundy Principles Template",
|
|
7428
|
+
description: "Editorial studio deck template in burgundy / blush / muted-gold \u2014 pill tags, large typographic statements, principle cards, guided keyboard/click navigation.",
|
|
7429
|
+
source: { path: "skills/editorial-burgundy-principles-template/SKILL.md" }
|
|
7430
|
+
},
|
|
7431
|
+
{
|
|
7432
|
+
id: "od:skill:enhance-prompt",
|
|
7433
|
+
kind: "skill",
|
|
7434
|
+
name: "Enhance Prompt",
|
|
7435
|
+
description: "Improve prompts with design specs and UI/UX vocabulary. Useful for design-to-code workflows and clarifying requests for visual output.",
|
|
7436
|
+
source: { path: "skills/enhance-prompt/SKILL.md" }
|
|
7437
|
+
},
|
|
7438
|
+
{
|
|
7439
|
+
id: "od:skill:faq-page",
|
|
7440
|
+
kind: "skill",
|
|
7441
|
+
name: "FAQ Page",
|
|
7442
|
+
description: "A Frequently Asked Questions (FAQ) page with collapsible accordion sections, search functionality, and category filtering.",
|
|
7443
|
+
source: { path: "skills/faq-page/SKILL.md" }
|
|
7444
|
+
},
|
|
7445
|
+
{
|
|
7446
|
+
id: "od:skill:field-notes-editorial-template",
|
|
7447
|
+
kind: "skill",
|
|
7448
|
+
name: "Field Notes Editorial Template",
|
|
7449
|
+
description: "Editorial Field Notes report template \u2014 soft paper background, serif hero typography, rounded pastel insight cards, retention chart panel. Premium magazine-style.",
|
|
7450
|
+
source: { path: "skills/field-notes-editorial-template/SKILL.md" }
|
|
7451
|
+
},
|
|
7452
|
+
{
|
|
7453
|
+
id: "od:skill:figma-create-design-system-rules",
|
|
7454
|
+
kind: "skill",
|
|
7455
|
+
name: "Figma Create Design System Rules",
|
|
7456
|
+
description: "Generate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source.",
|
|
7457
|
+
source: { path: "skills/figma-create-design-system-rules/SKILL.md" }
|
|
7458
|
+
},
|
|
7459
|
+
{
|
|
7460
|
+
id: "od:skill:figma-generate-design",
|
|
7461
|
+
kind: "skill",
|
|
7462
|
+
name: "Figma Generate Design",
|
|
7463
|
+
description: "Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.",
|
|
7464
|
+
source: { path: "skills/figma-generate-design/SKILL.md" }
|
|
7465
|
+
},
|
|
7466
|
+
{
|
|
7467
|
+
id: "od:skill:figma-generate-library",
|
|
7468
|
+
kind: "skill",
|
|
7469
|
+
name: "Figma Generate Library",
|
|
7470
|
+
description: "Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.",
|
|
7471
|
+
source: { path: "skills/figma-generate-library/SKILL.md" }
|
|
7472
|
+
},
|
|
7473
|
+
{
|
|
7474
|
+
id: "od:skill:figma-implement-design",
|
|
7475
|
+
kind: "skill",
|
|
7476
|
+
name: "Figma Implement Design",
|
|
7477
|
+
description: "Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.",
|
|
7478
|
+
source: { path: "skills/figma-implement-design/SKILL.md" }
|
|
7479
|
+
},
|
|
7480
|
+
{
|
|
7481
|
+
id: "od:skill:flutter-animating-apps",
|
|
7482
|
+
kind: "skill",
|
|
7483
|
+
name: "Flutter Animating Apps",
|
|
7484
|
+
description: "Implement animated effects, transitions, and motion in Flutter apps. Useful for native iOS/Android motion design.",
|
|
7485
|
+
source: { path: "skills/flutter-animating-apps/SKILL.md" }
|
|
7486
|
+
},
|
|
7487
|
+
{
|
|
7488
|
+
id: "od:skill:frame-data-chart-nyt",
|
|
7489
|
+
kind: "skill",
|
|
7490
|
+
name: "Frame Data Chart Nyt",
|
|
7491
|
+
description: "NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).",
|
|
7492
|
+
source: { path: "skills/frame-data-chart-nyt/SKILL.md" }
|
|
7493
|
+
},
|
|
7494
|
+
{
|
|
7495
|
+
id: "od:skill:frame-flowchart-sticky",
|
|
7496
|
+
kind: "skill",
|
|
7497
|
+
name: "Frame Flowchart Sticky",
|
|
7498
|
+
description: "SVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.",
|
|
7499
|
+
source: { path: "skills/frame-flowchart-sticky/SKILL.md" }
|
|
7500
|
+
},
|
|
7501
|
+
{
|
|
7502
|
+
id: "od:skill:frame-glitch-title",
|
|
7503
|
+
kind: "skill",
|
|
7504
|
+
name: "Frame Glitch Title",
|
|
7505
|
+
description: "Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.",
|
|
7506
|
+
source: { path: "skills/frame-glitch-title/SKILL.md" }
|
|
7507
|
+
},
|
|
7508
|
+
{
|
|
7509
|
+
id: "od:skill:frame-light-leak-cinema",
|
|
7510
|
+
kind: "skill",
|
|
7511
|
+
name: "Frame Light Leak Cinema",
|
|
7512
|
+
description: "Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.",
|
|
7513
|
+
source: { path: "skills/frame-light-leak-cinema/SKILL.md" }
|
|
7514
|
+
},
|
|
7515
|
+
{
|
|
7516
|
+
id: "od:skill:frame-liquid-bg-hero",
|
|
7517
|
+
kind: "skill",
|
|
7518
|
+
name: "Frame Liquid Bg Hero",
|
|
7519
|
+
description: "WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.",
|
|
7520
|
+
source: { path: "skills/frame-liquid-bg-hero/SKILL.md" }
|
|
7521
|
+
},
|
|
7522
|
+
{
|
|
7523
|
+
id: "od:skill:frame-logo-outro",
|
|
7524
|
+
kind: "skill",
|
|
7525
|
+
name: "Frame Logo Outro",
|
|
7526
|
+
description: "Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.",
|
|
7527
|
+
source: { path: "skills/frame-logo-outro/SKILL.md" }
|
|
7528
|
+
},
|
|
7529
|
+
{
|
|
7530
|
+
id: "od:skill:frame-macos-notification",
|
|
7531
|
+
kind: "skill",
|
|
7532
|
+
name: "Frame Macos Notification",
|
|
7533
|
+
description: "Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.",
|
|
7534
|
+
source: { path: "skills/frame-macos-notification/SKILL.md" }
|
|
7535
|
+
},
|
|
7536
|
+
{
|
|
7537
|
+
id: "od:skill:frontend-design",
|
|
7538
|
+
kind: "skill",
|
|
7539
|
+
name: "Frontend Design",
|
|
7540
|
+
description: "Frontend design and UI/UX development tools for shipping production-ready interfaces with strong typographic and layout discipline.",
|
|
7541
|
+
source: { path: "skills/frontend-design/SKILL.md" }
|
|
7542
|
+
},
|
|
7543
|
+
{
|
|
7544
|
+
id: "od:skill:frontend-dev",
|
|
7545
|
+
kind: "skill",
|
|
7546
|
+
name: "Frontend Dev",
|
|
7547
|
+
description: "Full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Useful for hero pages and showcase sites.",
|
|
7548
|
+
source: { path: "skills/frontend-dev/SKILL.md" }
|
|
7549
|
+
},
|
|
7550
|
+
{
|
|
7551
|
+
id: "od:skill:frontend-skill",
|
|
7552
|
+
kind: "skill",
|
|
7553
|
+
name: "Frontend Skill",
|
|
7554
|
+
description: "Create visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook.",
|
|
7555
|
+
source: { path: "skills/frontend-skill/SKILL.md" }
|
|
7556
|
+
},
|
|
7557
|
+
{
|
|
7558
|
+
id: "od:skill:frontend-slides",
|
|
7559
|
+
kind: "skill",
|
|
7560
|
+
name: "Frontend Slides",
|
|
7561
|
+
description: "Generate animation-rich HTML presentations with visual style previews. Useful for online keynotes, embedded talks, and interactive briefs.",
|
|
7562
|
+
source: { path: "skills/frontend-slides/SKILL.md" }
|
|
7563
|
+
},
|
|
7564
|
+
{
|
|
7565
|
+
id: "od:skill:gsap-core",
|
|
7566
|
+
kind: "skill",
|
|
7567
|
+
name: "GSAP Core",
|
|
7568
|
+
description: "Core GSAP API with gsap.to(), from(), fromTo(), easing, duration, stagger, and defaults. Production-grade web animation primitives.",
|
|
7569
|
+
source: { path: "skills/gsap-core/SKILL.md" }
|
|
7570
|
+
},
|
|
7571
|
+
{
|
|
7572
|
+
id: "od:skill:gsap-react",
|
|
7573
|
+
kind: "skill",
|
|
7574
|
+
name: "GSAP React",
|
|
7575
|
+
description: "GSAP React integration with useGSAP hook, refs, gsap.context(), cleanup, and SSR. Ships safe motion in React + Next.js apps.",
|
|
7576
|
+
source: { path: "skills/gsap-react/SKILL.md" }
|
|
7577
|
+
},
|
|
7578
|
+
{
|
|
7579
|
+
id: "od:skill:gsap-scrolltrigger",
|
|
7580
|
+
kind: "skill",
|
|
7581
|
+
name: "GSAP Scrolltrigger",
|
|
7582
|
+
description: "GSAP ScrollTrigger for scroll-linked animations, pinning, scrub, and refresh handling. Useful for editorial sites and product pages.",
|
|
7583
|
+
source: { path: "skills/gsap-scrolltrigger/SKILL.md" }
|
|
7584
|
+
},
|
|
7585
|
+
{
|
|
7586
|
+
id: "od:skill:gsap-timeline",
|
|
7587
|
+
kind: "skill",
|
|
7588
|
+
name: "GSAP Timeline",
|
|
7589
|
+
description: "GSAP Timelines with sequencing, position parameter, labels, nesting, and playback control. Useful for orchestrating multi-step motion sequences.",
|
|
7590
|
+
source: { path: "skills/gsap-timeline/SKILL.md" }
|
|
7591
|
+
},
|
|
7592
|
+
{
|
|
7593
|
+
id: "od:skill:hand-drawn-diagrams",
|
|
7594
|
+
kind: "skill",
|
|
7595
|
+
name: "Hand Drawn Diagrams",
|
|
7596
|
+
description: "Generate hand-drawn Excalidraw diagrams from a prompt - animated SVG, hosted edit link, and PNG export. Works with Claude Code, Codex, Gemini CLI, and any agent supporting standard skill paths.",
|
|
7597
|
+
source: { path: "skills/hand-drawn-diagrams/SKILL.md" }
|
|
7598
|
+
},
|
|
7599
|
+
{
|
|
7600
|
+
id: "od:skill:hatch-pet",
|
|
7601
|
+
kind: "skill",
|
|
7602
|
+
name: "Hatch Pet",
|
|
7603
|
+
description: "Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets with an 8x9 atlas, QA contact sheets, preview videos, and pet.json packaging.",
|
|
7604
|
+
source: { path: "skills/hatch-pet/SKILL.md" }
|
|
7605
|
+
},
|
|
7606
|
+
{
|
|
7607
|
+
id: "od:skill:html-ppt-retro-quarterly-review",
|
|
7608
|
+
kind: "skill",
|
|
7609
|
+
name: "HTML PPT Retro Quarterly Review",
|
|
7610
|
+
description: "Retro Quarterly Review template \u2014 bold blue + orange editorial with slab headlines, cream paper sections, structured grids, fast premium motion pacing in video mode.",
|
|
7611
|
+
source: { path: "skills/html-ppt-retro-quarterly-review/SKILL.md" }
|
|
7612
|
+
},
|
|
7613
|
+
{
|
|
7614
|
+
id: "od:skill:login-flow",
|
|
7615
|
+
kind: "skill",
|
|
7616
|
+
name: "Login Flow",
|
|
7617
|
+
description: "Mobile login and authentication flow screens.",
|
|
7618
|
+
source: { path: "skills/login-flow/SKILL.md" }
|
|
7619
|
+
},
|
|
7620
|
+
{
|
|
7621
|
+
id: "od:skill:mockup-device-3d",
|
|
7622
|
+
kind: "skill",
|
|
7623
|
+
name: "Mockup Device 3D",
|
|
7624
|
+
description: "Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.",
|
|
7625
|
+
source: { path: "skills/mockup-device-3d/SKILL.md" }
|
|
7626
|
+
},
|
|
7627
|
+
{
|
|
7628
|
+
id: "od:skill:paywall-upgrade-cro",
|
|
7629
|
+
kind: "skill",
|
|
7630
|
+
name: "Paywall Upgrade Cro",
|
|
7631
|
+
description: "Design and optimize upgrade screens, paywalls, and upsell modals. Useful for SaaS conversion design and pricing-page experiments.",
|
|
7632
|
+
source: { path: "skills/paywall-upgrade-cro/SKILL.md" }
|
|
7633
|
+
},
|
|
7634
|
+
{
|
|
7635
|
+
id: "od:skill:plan-design-review",
|
|
7636
|
+
kind: "skill",
|
|
7637
|
+
name: "Plan Design Review",
|
|
7638
|
+
description: "Senior Designer review: rates each design dimension 0-10, explains what a 10 looks like, and flags AI Slop signals. Useful as a gate before merging UI work.",
|
|
7639
|
+
source: { path: "skills/plan-design-review/SKILL.md" }
|
|
7640
|
+
},
|
|
7641
|
+
{
|
|
7642
|
+
id: "od:skill:platform-design",
|
|
7643
|
+
kind: "skill",
|
|
7644
|
+
name: "Platform Design",
|
|
7645
|
+
description: "300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps. Useful when shipping a single design across iOS, Android, and the web.",
|
|
7646
|
+
source: { path: "skills/platform-design/SKILL.md" }
|
|
7647
|
+
},
|
|
7648
|
+
{
|
|
7649
|
+
id: "od:skill:poster-hero",
|
|
7650
|
+
kind: "skill",
|
|
7651
|
+
name: "Poster Hero",
|
|
7652
|
+
description: "Vertical poster or Moments-style share image with strong visual impact.",
|
|
7653
|
+
source: { path: "skills/poster-hero/SKILL.md" }
|
|
7654
|
+
},
|
|
7655
|
+
{
|
|
7656
|
+
id: "od:skill:ppt-keynote",
|
|
7657
|
+
kind: "skill",
|
|
7658
|
+
name: "PPT Keynote",
|
|
7659
|
+
description: "Apple Keynote-quality slides, one card per screen, with keyboard left/right navigation.",
|
|
7660
|
+
source: { path: "skills/ppt-keynote/SKILL.md" }
|
|
7661
|
+
},
|
|
7662
|
+
{
|
|
7663
|
+
id: "od:skill:release-notes-one-pager",
|
|
7664
|
+
kind: "skill",
|
|
7665
|
+
name: "Release Notes One Pager",
|
|
7666
|
+
description: 'Release notes one-page HTML with highlights, Added, Fixed, Breaking changes, Known issues, and Upgrade note. Writes explicit "None" style sections whenever the user does not provide details.',
|
|
7667
|
+
source: { path: "skills/release-notes-one-pager/SKILL.md" }
|
|
7668
|
+
},
|
|
7669
|
+
{
|
|
7670
|
+
id: "od:skill:resume-modern",
|
|
7671
|
+
kind: "skill",
|
|
7672
|
+
name: "Resume Modern",
|
|
7673
|
+
description: "Modern minimal resume, single A4 page, ready for print or PDF export.",
|
|
7674
|
+
source: { path: "skills/resume-modern/SKILL.md" }
|
|
7675
|
+
},
|
|
7676
|
+
{
|
|
7677
|
+
id: "od:skill:screenshots-marketing",
|
|
7678
|
+
kind: "skill",
|
|
7679
|
+
name: "Screenshots Marketing",
|
|
7680
|
+
description: "Generate marketing screenshots with Playwright. Useful for landing-page hero shots, App Store screenshots, and changelog visuals.",
|
|
7681
|
+
source: { path: "skills/screenshots-marketing/SKILL.md" }
|
|
7682
|
+
},
|
|
7683
|
+
{
|
|
7684
|
+
id: "od:skill:shadcn-ui",
|
|
7685
|
+
kind: "skill",
|
|
7686
|
+
name: "Shadcn UI",
|
|
7687
|
+
description: "Build UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.",
|
|
7688
|
+
source: { path: "skills/shadcn-ui/SKILL.md" }
|
|
7689
|
+
},
|
|
7690
|
+
{
|
|
7691
|
+
id: "od:skill:shader-dev",
|
|
7692
|
+
kind: "skill",
|
|
7693
|
+
name: "Shader Dev",
|
|
7694
|
+
description: "GLSL shader techniques for ray marching, fluid simulation, particle systems, and procedural generation. Useful for hero visuals and motion stills.",
|
|
7695
|
+
source: { path: "skills/shader-dev/SKILL.md" }
|
|
7696
|
+
},
|
|
7697
|
+
{
|
|
7698
|
+
id: "od:skill:slack-gif-creator",
|
|
7699
|
+
kind: "skill",
|
|
7700
|
+
name: "Slack GIF Creator",
|
|
7701
|
+
description: "Create animated GIFs optimized for Slack with validators for size constraints and composable animation primitives.",
|
|
7702
|
+
source: { path: "skills/slack-gif-creator/SKILL.md" }
|
|
7703
|
+
},
|
|
7704
|
+
{
|
|
7705
|
+
id: "od:skill:slides",
|
|
7706
|
+
kind: "skill",
|
|
7707
|
+
name: "Slides",
|
|
7708
|
+
description: "Create and edit .pptx presentation decks with PptxGenJS. Useful for sales decks, kickoff briefs, and design-system showcases.",
|
|
7709
|
+
source: { path: "skills/slides/SKILL.md" }
|
|
7710
|
+
},
|
|
7711
|
+
{
|
|
7712
|
+
id: "od:skill:social-reddit-card",
|
|
7713
|
+
kind: "skill",
|
|
7714
|
+
name: "Social Reddit Card",
|
|
7715
|
+
description: "Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.",
|
|
7716
|
+
source: { path: "skills/social-reddit-card/SKILL.md" }
|
|
7717
|
+
},
|
|
7718
|
+
{
|
|
7719
|
+
id: "od:skill:social-spotify-card",
|
|
7720
|
+
kind: "skill",
|
|
7721
|
+
name: "Social Spotify Card",
|
|
7722
|
+
description: "Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.",
|
|
7723
|
+
source: { path: "skills/social-spotify-card/SKILL.md" }
|
|
7724
|
+
},
|
|
7725
|
+
{
|
|
7726
|
+
id: "od:skill:social-x-post-card",
|
|
7727
|
+
kind: "skill",
|
|
7728
|
+
name: "Social X Post Card",
|
|
7729
|
+
description: "Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.",
|
|
7730
|
+
source: { path: "skills/social-x-post-card/SKILL.md" }
|
|
7731
|
+
},
|
|
7732
|
+
{
|
|
7733
|
+
id: "od:skill:stitch-loop",
|
|
7734
|
+
kind: "skill",
|
|
7735
|
+
name: "Stitch Loop",
|
|
7736
|
+
description: "Iterative design-to-code feedback loop. Critique adjust ship cycle for tightening visual fidelity between brief and built UI.",
|
|
7737
|
+
source: { path: "skills/stitch-loop/SKILL.md" }
|
|
7738
|
+
},
|
|
7739
|
+
{
|
|
7740
|
+
id: "od:skill:swiftui-design",
|
|
7741
|
+
kind: "skill",
|
|
7742
|
+
name: "Swiftui Design",
|
|
7743
|
+
description: "SwiftUI skill - anti AI-slop rules, design direction advisor, brand asset protocol, and five-dimension review. Works with Claude Code, Cursor, Codex, and OpenCode.",
|
|
7744
|
+
source: { path: "skills/swiftui-design/SKILL.md" }
|
|
7745
|
+
},
|
|
7746
|
+
{
|
|
7747
|
+
id: "od:skill:swiss-creative-mode-template",
|
|
7748
|
+
kind: "skill",
|
|
7749
|
+
name: "Swiss Creative Mode Template",
|
|
7750
|
+
description: "Swiss-inspired creative-mode presentation template \u2014 bold editorial typography, high-contrast geometric cards, interactive slide navigation, theme switching, hotspot overlays.",
|
|
7751
|
+
source: { path: "skills/swiss-creative-mode-template/SKILL.md" }
|
|
7752
|
+
},
|
|
7753
|
+
{
|
|
7754
|
+
id: "od:skill:swiss-user-research-video-template",
|
|
7755
|
+
kind: "skill",
|
|
7756
|
+
name: "Swiss User Research Video Template",
|
|
7757
|
+
description: "Swiss-style user-research narrative template in warm-paper editorial aesthetics \u2014 minimalist typography, donut breakdowns, keyboard/click navigation, single-file HTML.",
|
|
7758
|
+
source: { path: "skills/swiss-user-research-video-template/SKILL.md" }
|
|
7759
|
+
},
|
|
7760
|
+
{
|
|
7761
|
+
id: "od:skill:taste-skill",
|
|
7762
|
+
kind: "skill",
|
|
7763
|
+
name: "Taste Skill",
|
|
7764
|
+
description: "High-agency frontend skill that gives AI good taste with tunable design variance, motion intensity, and visual density to stop generic UI slop.",
|
|
7765
|
+
source: { path: "skills/taste-skill/SKILL.md" }
|
|
7766
|
+
},
|
|
7767
|
+
{
|
|
7768
|
+
id: "od:skill:theme-factory",
|
|
7769
|
+
kind: "skill",
|
|
7770
|
+
name: "Theme Factory",
|
|
7771
|
+
description: "Apply professional font and color themes to artifacts including slides, docs, reports, and HTML landing pages. Ships 10 pre-set themes.",
|
|
7772
|
+
source: { path: "skills/theme-factory/SKILL.md" }
|
|
7773
|
+
},
|
|
7774
|
+
{
|
|
7775
|
+
id: "od:skill:threejs",
|
|
7776
|
+
kind: "skill",
|
|
7777
|
+
name: "Threejs",
|
|
7778
|
+
description: "Three.js skills for creating 3D elements and interactive experiences in the browser - scenes, materials, controls, and post-processing.",
|
|
7779
|
+
source: { path: "skills/threejs/SKILL.md" }
|
|
7780
|
+
},
|
|
7781
|
+
{
|
|
7782
|
+
id: "od:skill:ui-skills",
|
|
7783
|
+
kind: "skill",
|
|
7784
|
+
name: "UI Skills",
|
|
7785
|
+
description: "Opinionated, evolving constraints to guide agents when building interfaces. Useful for keeping output coherent across many small UI pieces.",
|
|
7786
|
+
source: { path: "skills/ui-skills/SKILL.md" }
|
|
7787
|
+
},
|
|
7788
|
+
{
|
|
7789
|
+
id: "od:skill:ui-ux-pro-max",
|
|
7790
|
+
kind: "skill",
|
|
7791
|
+
name: "UI UX Pro Max",
|
|
7792
|
+
description: "Catalog-only UI/UX Pro Max entry. The full upstream templates, data, and search workflow are not bundled in Open Design.",
|
|
7793
|
+
source: { path: "skills/ui-ux-pro-max/SKILL.md" }
|
|
7794
|
+
},
|
|
7795
|
+
{
|
|
7796
|
+
id: "od:skill:vfx-text-cursor",
|
|
7797
|
+
kind: "skill",
|
|
7798
|
+
name: "VFX Text Cursor",
|
|
7799
|
+
description: "Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.",
|
|
7800
|
+
source: { path: "skills/vfx-text-cursor/SKILL.md" }
|
|
7801
|
+
},
|
|
7802
|
+
{
|
|
7803
|
+
id: "od:skill:video-hyperframes",
|
|
7804
|
+
kind: "skill",
|
|
7805
|
+
name: "Video Hyperframes",
|
|
7806
|
+
description: "Hyperframes / Remotion-compatible continuous frame animation with autoplay support.",
|
|
7807
|
+
source: { path: "skills/video-hyperframes/SKILL.md" }
|
|
7808
|
+
},
|
|
7809
|
+
{
|
|
7810
|
+
id: "od:skill:web-design-guidelines",
|
|
7811
|
+
kind: "skill",
|
|
7812
|
+
name: "Web Design Guidelines",
|
|
7813
|
+
description: "Web design guidelines and standards by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.",
|
|
7814
|
+
source: { path: "skills/web-design-guidelines/SKILL.md" }
|
|
7815
|
+
},
|
|
7816
|
+
{
|
|
7817
|
+
id: "od:skill:weread-year-in-review-video-template",
|
|
7818
|
+
kind: "skill",
|
|
7819
|
+
name: "Weread Year In Review Video Template",
|
|
7820
|
+
description: "WeRead-inspired HyperFrames video template for vertical annual reading reports \u2014 warm paper texture, editorial Chinese typography, book-page metaphors, deterministic motion.",
|
|
7821
|
+
source: { path: "skills/weread-year-in-review-video-template/SKILL.md" }
|
|
7822
|
+
},
|
|
7823
|
+
{
|
|
7824
|
+
id: "od:skill:wpds",
|
|
7825
|
+
kind: "skill",
|
|
7826
|
+
name: "WPDS",
|
|
7827
|
+
description: "WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.",
|
|
7828
|
+
source: { path: "skills/wpds/SKILL.md" }
|
|
7829
|
+
},
|
|
7830
|
+
{
|
|
7831
|
+
id: "od:template:dashboard",
|
|
7832
|
+
kind: "template",
|
|
7833
|
+
name: "Dashboard",
|
|
7834
|
+
description: "Admin or analytics dashboard in a single HTML file with fixed sidebar, top bar, KPI cards, and one or two charts.",
|
|
7835
|
+
source: { path: "design-templates/dashboard" }
|
|
7836
|
+
},
|
|
7837
|
+
{
|
|
7838
|
+
id: "od:template:finance-report",
|
|
7839
|
+
kind: "template",
|
|
7840
|
+
name: "Finance Report",
|
|
7841
|
+
description: "Quarterly or monthly financial report with masthead KPIs, revenue and burn charts, P&L summary, highlights, and outlook.",
|
|
7842
|
+
source: { path: "design-templates/finance-report" }
|
|
7843
|
+
},
|
|
7844
|
+
{
|
|
7845
|
+
id: "od:template:docs-page",
|
|
7846
|
+
kind: "template",
|
|
7847
|
+
name: "Docs Page",
|
|
7848
|
+
description: "Documentation page with inline-start navigation, scrollable article body, and inline-end table of contents.",
|
|
7849
|
+
source: { path: "design-templates/docs-page" }
|
|
7850
|
+
},
|
|
7851
|
+
{
|
|
7852
|
+
id: "od:template:mobile-app",
|
|
7853
|
+
kind: "template",
|
|
7854
|
+
name: "Mobile App Design",
|
|
7855
|
+
description: "Mobile app screen rendered inside a pixel-accurate iPhone 15 Pro frame using reusable screen archetypes.",
|
|
7856
|
+
source: { path: "design-templates/mobile-app" }
|
|
7857
|
+
},
|
|
7858
|
+
{
|
|
7859
|
+
id: "od:template:html-ppt-graphify-dark-graph",
|
|
7860
|
+
kind: "template",
|
|
7861
|
+
name: "Graphify Dark Graph",
|
|
7862
|
+
description: "Dark knowledge-graph deck with midnight gradients, force-graph cover visuals, command-line highlights, and glass-morphism cards.",
|
|
7863
|
+
source: { path: "design-templates/html-ppt-graphify-dark-graph" }
|
|
7864
|
+
},
|
|
7865
|
+
{
|
|
7866
|
+
id: "od:template:html-ppt-zhangzara-retro-zine",
|
|
7867
|
+
kind: "template",
|
|
7868
|
+
name: "Zhangzara Retro Zine",
|
|
7869
|
+
description: "Retro editorial zine presentation template with expressive composition, tactile paper energy, and bold magazine-like rhythm.",
|
|
7870
|
+
source: { path: "design-templates/html-ppt-zhangzara-retro-zine" }
|
|
7871
|
+
},
|
|
7872
|
+
{
|
|
7873
|
+
id: "od:template:weekly-update",
|
|
7874
|
+
kind: "template",
|
|
7875
|
+
name: "Weekly Update",
|
|
7876
|
+
description: "Single-file horizontal-swipe weekly team update deck for shipped work, in-flight work, blockers, metrics, and asks.",
|
|
7877
|
+
source: { path: "design-templates/weekly-update" }
|
|
7878
|
+
},
|
|
7879
|
+
{
|
|
7880
|
+
id: "od:template:web-prototype-taste-editorial",
|
|
7881
|
+
kind: "template",
|
|
7882
|
+
name: "Taste Editorial Web Prototype",
|
|
7883
|
+
description: "Editorial-minimalist web prototype with warm monochrome canvas, serif display type, hairline borders, pastel chips, and ambient micro-motion.",
|
|
7884
|
+
source: { path: "design-templates/web-prototype-taste-editorial" }
|
|
7885
|
+
},
|
|
7886
|
+
{
|
|
7887
|
+
id: "od:template:audio-jingle",
|
|
7888
|
+
kind: "template",
|
|
7889
|
+
name: "Audio Jingle",
|
|
7890
|
+
description: "Audio generation skill \u2014 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 is one MP3/WAV file\u2026",
|
|
7891
|
+
source: { path: "design-templates/audio-jingle" }
|
|
7892
|
+
},
|
|
7893
|
+
{
|
|
7894
|
+
id: "od:template:blog-post",
|
|
7895
|
+
kind: "template",
|
|
7896
|
+
name: "Blog Post",
|
|
7897
|
+
description: "A long-form article / blog post \u2014 masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts.",
|
|
7898
|
+
source: { path: "design-templates/blog-post" }
|
|
7899
|
+
},
|
|
7900
|
+
{
|
|
7901
|
+
id: "od:template:clinical-case-report",
|
|
7902
|
+
kind: "template",
|
|
7903
|
+
name: "Clinical Case Report",
|
|
7904
|
+
description: "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.",
|
|
7905
|
+
source: { path: "design-templates/clinical-case-report" }
|
|
7906
|
+
},
|
|
7907
|
+
{
|
|
7908
|
+
id: "od:template:critique",
|
|
7909
|
+
kind: "template",
|
|
7910
|
+
name: "Critique",
|
|
7911
|
+
description: "Run a 5-dimension expert design review on any HTML artifact in the project \u2014 Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0\u201310. Outputs a single self-contained HTML report with a radar chart, evidence\u2026",
|
|
7912
|
+
source: { path: "design-templates/critique" }
|
|
7913
|
+
},
|
|
7914
|
+
{
|
|
7915
|
+
id: "od:template:dating-web",
|
|
7916
|
+
kind: "template",
|
|
7917
|
+
name: "Dating Web",
|
|
7918
|
+
description: "A consumer-feeling dating / matchmaking dashboard \u2014 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 accent.",
|
|
7919
|
+
source: { path: "design-templates/dating-web" }
|
|
7920
|
+
},
|
|
7921
|
+
{
|
|
7922
|
+
id: "od:template:dcf-valuation",
|
|
7923
|
+
kind: "template",
|
|
7924
|
+
name: "Dcf Valuation",
|
|
7925
|
+
description: "Discounted cash flow valuation and intrinsic value analysis for public companies.",
|
|
7926
|
+
source: { path: "design-templates/dcf-valuation" }
|
|
7927
|
+
},
|
|
7928
|
+
{
|
|
7929
|
+
id: "od:template:digital-eguide",
|
|
7930
|
+
kind: "template",
|
|
7931
|
+
name: "Digital Eguide",
|
|
7932
|
+
description: `A two-spread digital e-guide preview \u2014 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 brand tone.`,
|
|
7933
|
+
source: { path: "design-templates/digital-eguide" }
|
|
7934
|
+
},
|
|
7935
|
+
{
|
|
7936
|
+
id: "od:template:email-marketing",
|
|
7937
|
+
kind: "template",
|
|
7938
|
+
name: "Email Marketing",
|
|
7939
|
+
description: "A brand product-launch email \u2014 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, table fallback).",
|
|
7940
|
+
source: { path: "design-templates/email-marketing" }
|
|
7941
|
+
},
|
|
7942
|
+
{
|
|
7943
|
+
id: "od:template:eng-runbook",
|
|
7944
|
+
kind: "template",
|
|
7945
|
+
name: "Eng Runbook",
|
|
7946
|
+
description: "An engineering runbook \u2014 service overview, alerts table, dashboards links, common procedures with copy-pasteable commands, on-call rotation, and an incident-response checklist.",
|
|
7947
|
+
source: { path: "design-templates/eng-runbook" }
|
|
7948
|
+
},
|
|
7949
|
+
{
|
|
7950
|
+
id: "od:template:flowai-live-dashboard-template",
|
|
7951
|
+
kind: "template",
|
|
7952
|
+
name: "Flowai Live Dashboard Template",
|
|
7953
|
+
description: "FlowAI team-management dashboard \u2014 three tabs (Members, Details, Activity Log), KPI row, role chart, presence sparklines, contributor panel, light/dark, CSV export, single HTML.",
|
|
7954
|
+
source: { path: "design-templates/flowai-live-dashboard-template" }
|
|
7955
|
+
},
|
|
7956
|
+
{
|
|
7957
|
+
id: "od:template:gamified-app",
|
|
7958
|
+
kind: "template",
|
|
7959
|
+
name: "Gamified App",
|
|
7960
|
+
description: "A multi-frame gamified mobile-app prototype \u2014 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, level ribbon, bottom t\u2026",
|
|
7961
|
+
source: { path: "design-templates/gamified-app" }
|
|
7962
|
+
},
|
|
7963
|
+
{
|
|
7964
|
+
id: "od:template:github-dashboard",
|
|
7965
|
+
kind: "template",
|
|
7966
|
+
name: "Github Dashboard",
|
|
7967
|
+
description: "GitHub repository analytics dashboard \u2014 stars, forks, contributors, issues, pull requests, recent activity, and top contributors.",
|
|
7968
|
+
source: { path: "design-templates/github-dashboard" }
|
|
7969
|
+
},
|
|
7970
|
+
{
|
|
7971
|
+
id: "od:template:guizang-ppt",
|
|
7972
|
+
kind: "template",
|
|
7973
|
+
name: "Guizang PPT",
|
|
7974
|
+
description: "\u7535\u5B50\u6742\u5FD7 \xD7 \u7535\u5B50\u58A8\u6C34\u98CE\u683C\u7684\u6A2A\u5411\u7FFB\u9875\u7F51\u9875 PPT \u2014 WebGL \u6D41\u4F53\u80CC\u666F\u3001\u886C\u7EBF\u6807\u9898\u3001\u7AE0\u8282\u5E55\u5C01\u3001\u6570\u636E\u5927\u5B57\u62A5\u3001\u56FE\u7247\u7F51\u683C\u3002\u9002\u5408\u5206\u4EAB / \u6F14\u8BB2 / \u53D1\u5E03\u4F1A / \u6742\u5FD7\u98CE PPT\u3002",
|
|
7975
|
+
source: { path: "design-templates/guizang-ppt" }
|
|
7976
|
+
},
|
|
7977
|
+
{
|
|
7978
|
+
id: "od:template:hr-onboarding",
|
|
7979
|
+
kind: "template",
|
|
7980
|
+
name: "Hr Onboarding",
|
|
7981
|
+
description: `A new-hire onboarding plan as a single page \u2014 first week schedule, buddy + manager intro, learning track, equipment checklist, and "you're set when\u2026" outcomes.`,
|
|
7982
|
+
source: { path: "design-templates/hr-onboarding" }
|
|
7983
|
+
},
|
|
7984
|
+
{
|
|
7985
|
+
id: "od:template:html-ppt",
|
|
7986
|
+
kind: "template",
|
|
7987
|
+
name: "HTML PPT",
|
|
7988
|
+
description: "HTML PPT Studio \u2014 static HTML presentations driven by templates. Many styles, layouts, animations, and keyboard navigation for talks, pitches, reports, and \u5C0F\u7EA2\u4E66\u56FE\u6587.",
|
|
7989
|
+
source: { path: "design-templates/html-ppt" }
|
|
7990
|
+
},
|
|
7991
|
+
{
|
|
7992
|
+
id: "od:template:html-ppt-course-module",
|
|
7993
|
+
kind: "template",
|
|
7994
|
+
name: "HTML PPT Course Module",
|
|
7995
|
+
description: "Online-course / workshop module deck \u2014 warm paper background + Playfair serif, persistent left sidebar of learning objectives, MCQ self-check page. Use for teaching modules, training materials, workshop slides.",
|
|
7996
|
+
source: { path: "design-templates/html-ppt-course-module" }
|
|
7997
|
+
},
|
|
7998
|
+
{
|
|
7999
|
+
id: "od:template:html-ppt-dir-key-nav-minimal",
|
|
8000
|
+
kind: "template",
|
|
8001
|
+
name: "HTML PPT Dir Key Nav Minimal",
|
|
8002
|
+
description: "\u6781\u7B80\u65B9\u5411\u952E keynote \u2014 \u6BCF\u9875\u72EC\u7ACB\u5355\u8272\u80CC\u666F\u3001160px display \u6807\u9898\u30014px accent \u7EBF\u3001\u7BAD\u5934 \u2192 \u524D\u7F00 Mono \u5217\u8868\u3001\u2190 \u2192 kbd \u63D0\u793A\u3002\u9002\u5408 keynote\u3001launch\u3001\u516C\u5F00\u6F14\u8BB2\u3002",
|
|
8003
|
+
source: { path: "design-templates/html-ppt-dir-key-nav-minimal" }
|
|
8004
|
+
},
|
|
8005
|
+
{
|
|
8006
|
+
id: "od:template:html-ppt-hermes-cyber-terminal",
|
|
8007
|
+
kind: "template",
|
|
8008
|
+
name: "HTML PPT Hermes Cyber Terminal",
|
|
8009
|
+
description: "\u6697\u7EC8\u7AEF honest-review deck \u2014 \u9ED1\u5E95 + \u8D5B\u535A\u7F51\u683C + CRT \u6697\u89D2 + \u626B\u63CF\u7EBF\u3001`$ prompt` \u547D\u4EE4\u884C\u6807\u9898\u3001\u8584\u8377\u7EFF\u5927\u5B57\u3001JetBrains Mono\u3001stroke-only \u67F1\u72B6\u56FE\u3002\u9002\u5408 CLI/agent/dev tool \u6D4B\u8BC4\u3002",
|
|
8010
|
+
source: { path: "design-templates/html-ppt-hermes-cyber-terminal" }
|
|
8011
|
+
},
|
|
8012
|
+
{
|
|
8013
|
+
id: "od:template:html-ppt-knowledge-arch-blueprint",
|
|
8014
|
+
kind: "template",
|
|
8015
|
+
name: "HTML PPT Knowledge Arch Blueprint",
|
|
8016
|
+
description: "\u5976\u6CB9\u84DD\u56FE\u67B6\u6784 deck \u2014 \u5976\u6CB9\u7EB8\u5E95\u8272 + \u5355\u4E00\u9508\u7EA2\u9AD8\u4EAE\u300148px \u84DD\u56FE\u7F51\u683C\u30012px \u9ED1\u8FB9\u786C\u5361\u7247\u3001pipeline \u6B65\u9AA4\u76D2\u3001\u53F3\u4FA7 insight callout\u3001Playfair \u886C\u7EBF\u5927\u5B57\u3002\u96F6\u6E10\u53D8\u96F6\u8F6F\u9634\u5F71\u3002",
|
|
8017
|
+
source: { path: "design-templates/html-ppt-knowledge-arch-blueprint" }
|
|
8018
|
+
},
|
|
8019
|
+
{
|
|
8020
|
+
id: "od:template:html-ppt-obsidian-claude-gradient",
|
|
8021
|
+
kind: "template",
|
|
8022
|
+
name: "HTML PPT Obsidian Claude Gradient",
|
|
8023
|
+
description: "GitHub \u6697\u7D2B\u6E10\u53D8 deck \u2014 GitHub-dark + \u7D2B\u84DD radial \u73AF\u5883\u5149 + 60px \u7F51\u683C\u3001\u7D2B\u8272 pill \u6807\u7B7E\u3001\u4E09\u8272\u6E10\u53D8\u6807\u9898\u3001GitHub \u98CE\u4EE3\u7801 palette\u3002\u9002\u5408\u5F00\u53D1\u8005\u5DE5\u4F5C\u6D41 / MCP / Agent \u6559\u7A0B\u3002",
|
|
8024
|
+
source: { path: "design-templates/html-ppt-obsidian-claude-gradient" }
|
|
8025
|
+
},
|
|
8026
|
+
{
|
|
8027
|
+
id: "od:template:html-ppt-pitch-deck",
|
|
8028
|
+
kind: "template",
|
|
8029
|
+
name: "HTML PPT Pitch Deck",
|
|
8030
|
+
description: "Investor-ready 10-slide HTML pitch deck \u2014 white + blue\u2192purple gradient hero, big numbers, traction bar chart, $4.5M-style ask page.",
|
|
8031
|
+
source: { path: "design-templates/html-ppt-pitch-deck" }
|
|
8032
|
+
},
|
|
8033
|
+
{
|
|
8034
|
+
id: "od:template:html-ppt-presenter-mode-reveal",
|
|
8035
|
+
kind: "template",
|
|
8036
|
+
name: "HTML PPT Presenter Mode Reveal",
|
|
8037
|
+
description: "\u6F14\u8BB2\u8005\u6A21\u5F0F deck \u2014 tokyo-night \u9ED8\u8BA4\u4E3B\u9898\uFF0C5 \u5957\u4E3B\u9898 T \u952E\u5207\u6362\uFF0C\u6BCF\u9875\u5E26 150-300 \u5B57\u9010\u5B57\u7A3F\u793A\u4F8B\uFF0C\u6309 S \u6253\u5F00 CURRENT/NEXT/SCRIPT/TIMER \u56DB\u5F20\u78C1\u5438\u5361\u7247\u3002\u9002\u5408\u63D0\u8BCD\u5668\u573A\u666F\u3002",
|
|
8038
|
+
source: { path: "design-templates/html-ppt-presenter-mode-reveal" }
|
|
8039
|
+
},
|
|
8040
|
+
{
|
|
8041
|
+
id: "od:template:html-ppt-product-launch",
|
|
8042
|
+
kind: "template",
|
|
8043
|
+
name: "HTML PPT Product Launch",
|
|
8044
|
+
description: "Launch keynote deck \u2014 dark hero + light content, warm orange\u2192peach accent, feature cards, pricing tiers, CTA.",
|
|
8045
|
+
source: { path: "design-templates/html-ppt-product-launch" }
|
|
8046
|
+
},
|
|
8047
|
+
{
|
|
8048
|
+
id: "od:template:html-ppt-taste-brutalist",
|
|
8049
|
+
kind: "template",
|
|
8050
|
+
name: "HTML PPT Taste Brutalist",
|
|
8051
|
+
description: "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 `brutal\u2026",
|
|
8052
|
+
source: { path: "design-templates/html-ppt-taste-brutalist" }
|
|
8053
|
+
},
|
|
8054
|
+
{
|
|
8055
|
+
id: "od:template:html-ppt-taste-editorial",
|
|
8056
|
+
kind: "template",
|
|
8057
|
+
name: "HTML PPT Taste Editorial",
|
|
8058
|
+
description: "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`.",
|
|
8059
|
+
source: { path: "design-templates/html-ppt-taste-editorial" }
|
|
8060
|
+
},
|
|
8061
|
+
{
|
|
8062
|
+
id: "od:template:html-ppt-tech-sharing",
|
|
8063
|
+
kind: "template",
|
|
8064
|
+
name: "HTML PPT Tech Sharing",
|
|
8065
|
+
description: "Conference / internal tech-talk deck \u2014 GitHub-dark, JetBrains Mono, terminal code blocks, agenda + Q&A pages. Use for engineering presentations, internal sharing sessions, conference talks, and code-heavy walkthroughs.",
|
|
8066
|
+
source: { path: "design-templates/html-ppt-tech-sharing" }
|
|
8067
|
+
},
|
|
8068
|
+
{
|
|
8069
|
+
id: "od:template:html-ppt-testing-safety-alert",
|
|
8070
|
+
kind: "template",
|
|
8071
|
+
name: "HTML PPT Testing Safety Alert",
|
|
8072
|
+
description: "\u7EA2\u7425\u73C0\u8B66\u793A deck \u2014 \u9876/\u5E95 45\xB0 \u7EA2\u9ED1 hazard \u6761\u7EB9\u3001\u7EA2\u8272\u5426\u5B9A\u6807\u9898\u3001L1/L2/L3 \u4E09\u6863\u5361\u7247\u3001policy-yaml \u4EE3\u7801\u5757\u3001\u7EA2\u7EFF checklist\u3001\u4E8B\u6545\u5806\u53E0\u67F1\u72B6\u56FE\u3002\u9002\u5408\u5B89\u5168 / \u98CE\u9669 / \u590D\u76D8 / \u7EA2\u961F\u3002",
|
|
8073
|
+
source: { path: "design-templates/html-ppt-testing-safety-alert" }
|
|
8074
|
+
},
|
|
8075
|
+
{
|
|
8076
|
+
id: "od:template:html-ppt-weekly-report",
|
|
8077
|
+
kind: "template",
|
|
8078
|
+
name: "HTML PPT Weekly Report",
|
|
8079
|
+
description: "Team weekly / status-update deck \u2014 corporate clarity, 8-cell KPI grid, shipped list, 8-week bar chart, next-week table. Use for \u5468\u62A5, business reviews, team status updates, and exec dashboards.",
|
|
8080
|
+
source: { path: "design-templates/html-ppt-weekly-report" }
|
|
8081
|
+
},
|
|
8082
|
+
{
|
|
8083
|
+
id: "od:template:html-ppt-xhs-pastel-card",
|
|
8084
|
+
kind: "template",
|
|
8085
|
+
name: "HTML PPT Xhs Pastel Card",
|
|
8086
|
+
description: "\u67D4\u548C\u9A6C\u5361\u9F99\u6162\u751F\u6D3B deck \u2014 \u5976\u6CB9\u5E95 + \u67D4\u5149 blob\u3001Playfair \u659C\u4F53 + sans \u6B63\u6587\u300128px \u5706\u89D2\u9A6C\u5361\u9F99\u5361\u7247\u3001SVG donut \u56FE\u3001chip+page \u9876\u680F\u3002\u9002\u5408\u751F\u6D3B\u65B9\u5F0F / \u4E2A\u4EBA\u6210\u957F / \u6162\u751F\u6D3B\u5185\u5BB9\u3002",
|
|
8087
|
+
source: { path: "design-templates/html-ppt-xhs-pastel-card" }
|
|
8088
|
+
},
|
|
8089
|
+
{
|
|
8090
|
+
id: "od:template:html-ppt-xhs-post",
|
|
8091
|
+
kind: "template",
|
|
8092
|
+
name: "HTML PPT Xhs Post",
|
|
8093
|
+
description: "\u5C0F\u7EA2\u4E66 / Instagram \u98CE 9 \u9875 3:4 \u7AD6\u7248\u56FE\u6587\uFF08810\xD71080\uFF09\u2014 \u6696\u8272 pastel\u3001\u865A\u7EBF sticker \u5361\u7247\u3001\u5E95\u90E8\u9875\u7801\u70B9\u70B9\u3002",
|
|
8094
|
+
source: { path: "design-templates/html-ppt-xhs-post" }
|
|
8095
|
+
},
|
|
8096
|
+
{
|
|
8097
|
+
id: "od:template:html-ppt-xhs-white-editorial",
|
|
8098
|
+
kind: "template",
|
|
8099
|
+
name: "HTML PPT Xhs White Editorial",
|
|
8100
|
+
description: "\u767D\u5E95\u6742\u5FD7\u98CE deck \u2014 \u7EAF\u767D + \u9876\u90E8 10 \u8272\u5F69\u8679 bar\u300180-110px display \u6807\u9898\u3001\u7D2B\u2192\u84DD\u2192\u7EFF\u2192\u6A59\u2192\u7C89\u6E10\u53D8\u6587\u5B57\u3001\u9A6C\u5361\u9F99\u8F6F\u5361\u7247\u7EC4\u3001\u9ED1\u5E95\u767D\u5B57 .focus pill\u3002\u5C0F\u7EA2\u4E66\u56FE\u6587 + \u6A2A\u7248 PPT \u53CC\u7528\u3002",
|
|
8101
|
+
source: { path: "design-templates/html-ppt-xhs-white-editorial" }
|
|
8102
|
+
},
|
|
8103
|
+
{
|
|
8104
|
+
id: "od:template:html-ppt-zhangzara-8-bit-orbit",
|
|
8105
|
+
kind: "template",
|
|
8106
|
+
name: "HTML PPT Zhangzara 8 Bit Orbit",
|
|
8107
|
+
description: "8-Bit Orbit \u2014 pixel-art neon arcade aesthetic on a deep navy void. For cyberpunk, gaming, web3, indie dev tools, hackathon demos that should feel like a CRT screen at 2am.",
|
|
8108
|
+
source: { path: "design-templates/html-ppt-zhangzara-8-bit-orbit" }
|
|
8109
|
+
},
|
|
8110
|
+
{
|
|
8111
|
+
id: "od:template:html-ppt-zhangzara-biennale-yellow",
|
|
8112
|
+
kind: "template",
|
|
8113
|
+
name: "HTML PPT Zhangzara Biennale Yellow",
|
|
8114
|
+
description: "Biennale Yellow \u2014 solar yellow on warm parchment with deep indigo serif and sun-glow gradients. For art-biennale posters, museum programmes, curatorial pitches, literary publications.",
|
|
8115
|
+
source: { path: "design-templates/html-ppt-zhangzara-biennale-yellow" }
|
|
8116
|
+
},
|
|
8117
|
+
{
|
|
8118
|
+
id: "od:template:html-ppt-zhangzara-block-frame",
|
|
8119
|
+
kind: "template",
|
|
8120
|
+
name: "HTML PPT Zhangzara Block Frame",
|
|
8121
|
+
description: "BlockFrame \u2014 neobrutalist deck with pastel-neon color blocks and chunky black borders. Pop-graphic and design-led for indie SaaS launches, agency credentials, brand redesigns.",
|
|
8122
|
+
source: { path: "design-templates/html-ppt-zhangzara-block-frame" }
|
|
8123
|
+
},
|
|
8124
|
+
{
|
|
8125
|
+
id: "od:template:html-ppt-zhangzara-blue-professional",
|
|
8126
|
+
kind: "template",
|
|
8127
|
+
name: "HTML PPT Zhangzara Blue Professional",
|
|
8128
|
+
description: "Blue Professional \u2014 cream paper background with electric cobalt blue accents; clean modern professional. For B2B SaaS pitches, consulting deliverables, advisory updates, investor reports.",
|
|
8129
|
+
source: { path: "design-templates/html-ppt-zhangzara-blue-professional" }
|
|
8130
|
+
},
|
|
8131
|
+
{
|
|
8132
|
+
id: "od:template:html-ppt-zhangzara-bold-poster",
|
|
8133
|
+
kind: "template",
|
|
8134
|
+
name: "HTML PPT Zhangzara Bold Poster",
|
|
8135
|
+
description: "Bold Poster \u2014 editorial poster aesthetic with massive Shrikhand display and a single fire-engine red accent. For magazine-cover brand manifestos and editorial / cultural pitches.",
|
|
8136
|
+
source: { path: "design-templates/html-ppt-zhangzara-bold-poster" }
|
|
8137
|
+
},
|
|
8138
|
+
{
|
|
8139
|
+
id: "od:template:html-ppt-zhangzara-broadside",
|
|
8140
|
+
kind: "template",
|
|
8141
|
+
name: "HTML PPT Zhangzara Broadside",
|
|
8142
|
+
description: "Broadside \u2014 dark editorial canvas with a single fire orange accent and bilingual Latin/Chinese type stack. For manifestos, magazine pitches, design talks, bilingual EN/CN decks.",
|
|
8143
|
+
source: { path: "design-templates/html-ppt-zhangzara-broadside" }
|
|
8144
|
+
},
|
|
8145
|
+
{
|
|
8146
|
+
id: "od:template:html-ppt-zhangzara-capsule",
|
|
8147
|
+
kind: "template",
|
|
8148
|
+
name: "HTML PPT Zhangzara Capsule",
|
|
8149
|
+
description: "Capsule \u2014 modular pill-shaped cards on warm bone with a full pastel-pop palette. For lifestyle brands, creator portfolios, DTC launches, beauty / wellness, agency credentials.",
|
|
8150
|
+
source: { path: "design-templates/html-ppt-zhangzara-capsule" }
|
|
8151
|
+
},
|
|
8152
|
+
{
|
|
8153
|
+
id: "od:template:html-ppt-zhangzara-cartesian",
|
|
8154
|
+
kind: "template",
|
|
8155
|
+
name: "HTML PPT Zhangzara Cartesian",
|
|
8156
|
+
description: "Cartesian \u2014 quiet warm-neutral palette with classical Playfair serifs; tasteful and unhurried. For investment theses, white papers, advisory work, longform research, gallery decks.",
|
|
8157
|
+
source: { path: "design-templates/html-ppt-zhangzara-cartesian" }
|
|
8158
|
+
},
|
|
8159
|
+
{
|
|
8160
|
+
id: "od:template:html-ppt-zhangzara-cobalt-grid",
|
|
8161
|
+
kind: "template",
|
|
8162
|
+
name: "HTML PPT Zhangzara Cobalt Grid",
|
|
8163
|
+
description: "Cobalt Grid \u2014 electric cobalt italic serifs on a graph-paper canvas with stair-stepped pixel-glitch decorations. For design / research bulletins, art publications, curated trend reports.",
|
|
8164
|
+
source: { path: "design-templates/html-ppt-zhangzara-cobalt-grid" }
|
|
8165
|
+
},
|
|
8166
|
+
{
|
|
8167
|
+
id: "od:template:html-ppt-zhangzara-coral",
|
|
8168
|
+
kind: "template",
|
|
8169
|
+
name: "HTML PPT Zhangzara Coral",
|
|
8170
|
+
description: "Coral \u2014 cream and coral on near-black, set in oversized Bebas Neue. Warm-graphic editorial for fashion, beauty, fitness, F&B, lifestyle brands, agency credentials.",
|
|
8171
|
+
source: { path: "design-templates/html-ppt-zhangzara-coral" }
|
|
8172
|
+
},
|
|
8173
|
+
{
|
|
8174
|
+
id: "od:template:html-ppt-zhangzara-creative-mode",
|
|
8175
|
+
kind: "template",
|
|
8176
|
+
name: "HTML PPT Zhangzara Creative Mode",
|
|
8177
|
+
description: "Creative Mode \u2014 cream paper canvas with confident multi-color accents and Archivo Black display. For creative agency pitches, design studio decks, ad credentials, brand creative reviews.",
|
|
8178
|
+
source: { path: "design-templates/html-ppt-zhangzara-creative-mode" }
|
|
8179
|
+
},
|
|
8180
|
+
{
|
|
8181
|
+
id: "od:template:html-ppt-zhangzara-daisy-days",
|
|
8182
|
+
kind: "template",
|
|
8183
|
+
name: "HTML PPT Zhangzara Daisy Days",
|
|
8184
|
+
description: "Daisy Days \u2014 cheerful pastel deck with hand-drawn daisies, stars, and rainbows. Friendly, soft, and warm for educational content, kids and family, wellness, community workshops.",
|
|
8185
|
+
source: { path: "design-templates/html-ppt-zhangzara-daisy-days" }
|
|
8186
|
+
},
|
|
8187
|
+
{
|
|
8188
|
+
id: "od:template:html-ppt-zhangzara-editorial-tri-tone",
|
|
8189
|
+
kind: "template",
|
|
8190
|
+
name: "HTML PPT Zhangzara Editorial Tri Tone",
|
|
8191
|
+
description: "Editorial Tri-Tone \u2014 three-color editorial: dusty pink, mustard cream, deep burgundy; Bricolage + Instrument Serif. For fashion-magazine spreads, brand decks, lifestyle media.",
|
|
8192
|
+
source: { path: "design-templates/html-ppt-zhangzara-editorial-tri-tone" }
|
|
8193
|
+
},
|
|
8194
|
+
{
|
|
8195
|
+
id: "od:template:html-ppt-zhangzara-grove",
|
|
8196
|
+
kind: "template",
|
|
8197
|
+
name: "HTML PPT Zhangzara Grove",
|
|
8198
|
+
description: "Grove \u2014 forest-green canvas with cream type, classical Playfair serifs, single rust accent. For sustainability and wellness brands, outdoor products, wineries, advisory deliverables.",
|
|
8199
|
+
source: { path: "design-templates/html-ppt-zhangzara-grove" }
|
|
8200
|
+
},
|
|
8201
|
+
{
|
|
8202
|
+
id: "od:template:html-ppt-zhangzara-long-table",
|
|
8203
|
+
kind: "template",
|
|
8204
|
+
name: "HTML PPT Zhangzara Long Table",
|
|
8205
|
+
description: "Long Table \u2014 warm cream and rust-red supper-club aesthetic with bold uppercase grotesk headlines and italic Fraunces. For supper clubs, dinner series, lifestyle and wine brands.",
|
|
8206
|
+
source: { path: "design-templates/html-ppt-zhangzara-long-table" }
|
|
8207
|
+
},
|
|
8208
|
+
{
|
|
8209
|
+
id: "od:template:html-ppt-zhangzara-mat",
|
|
8210
|
+
kind: "template",
|
|
8211
|
+
name: "HTML PPT Zhangzara Mat",
|
|
8212
|
+
description: "Mat \u2014 dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones. For architecture/interior brands, ceramics, craft, furniture, advisory decks.",
|
|
8213
|
+
source: { path: "design-templates/html-ppt-zhangzara-mat" }
|
|
8214
|
+
},
|
|
8215
|
+
{
|
|
8216
|
+
id: "od:template:html-ppt-zhangzara-monochrome",
|
|
8217
|
+
kind: "template",
|
|
8218
|
+
name: "HTML PPT Zhangzara Monochrome",
|
|
8219
|
+
description: "Monochrome \u2014 ivory ledger paper with all-black type; Lora serif headlines, Jost body, no color. For research synthesis, white papers, longform reports, bilingual EN/CN deliverables.",
|
|
8220
|
+
source: { path: "design-templates/html-ppt-zhangzara-monochrome" }
|
|
8221
|
+
},
|
|
8222
|
+
{
|
|
8223
|
+
id: "od:template:html-ppt-zhangzara-neo-grid-bold",
|
|
8224
|
+
kind: "template",
|
|
8225
|
+
name: "HTML PPT Zhangzara Neo Grid Bold",
|
|
8226
|
+
description: "Neo-Grid Bold \u2014 editorial neo-brutalism with a single neon yellow accent on off-white paper. For design-led pitches, brand work, founder talks, conference keynotes.",
|
|
8227
|
+
source: { path: "design-templates/html-ppt-zhangzara-neo-grid-bold" }
|
|
8228
|
+
},
|
|
8229
|
+
{
|
|
8230
|
+
id: "od:template:html-ppt-zhangzara-peoples-platform",
|
|
8231
|
+
kind: "template",
|
|
8232
|
+
name: "HTML PPT Zhangzara Peoples Platform",
|
|
8233
|
+
description: "People's Platform (Block & Bold) \u2014 activist poster energy: blue, orange, red on cream, with Alfa Slab + Caveat Brush. For cultural commentary, manifestos, civic decks, campaign pitches.",
|
|
8234
|
+
source: { path: "design-templates/html-ppt-zhangzara-peoples-platform" }
|
|
8235
|
+
},
|
|
8236
|
+
{
|
|
8237
|
+
id: "od:template:html-ppt-zhangzara-pin-and-paper",
|
|
8238
|
+
kind: "template",
|
|
8239
|
+
name: "HTML PPT Zhangzara Pin And Paper",
|
|
8240
|
+
description: "Pin & Paper \u2014 yellow paper with safety-pin illustrations, ink-blue handwritten Caveat, paper-grain texture. For qualitative research, founder reflections, longform brand stories.",
|
|
8241
|
+
source: { path: "design-templates/html-ppt-zhangzara-pin-and-paper" }
|
|
8242
|
+
},
|
|
8243
|
+
{
|
|
8244
|
+
id: "od:template:html-ppt-zhangzara-pink-script",
|
|
8245
|
+
kind: "template",
|
|
8246
|
+
name: "HTML PPT Zhangzara Pink Script",
|
|
8247
|
+
description: "Pink Script (After Hours) \u2014 black canvas, hot pink accent, pearl-cream paper, Instrument Serif. Late-night editorial luxury for fashion, creator brands, nightlife, and luxury reveals.",
|
|
8248
|
+
source: { path: "design-templates/html-ppt-zhangzara-pink-script" }
|
|
8249
|
+
},
|
|
8250
|
+
{
|
|
8251
|
+
id: "od:template:html-ppt-zhangzara-playful",
|
|
8252
|
+
kind: "template",
|
|
8253
|
+
name: "HTML PPT Zhangzara Playful",
|
|
8254
|
+
description: "Playful \u2014 sun-warm peach background with Syne display: a friendly indie launch deck. For creator portfolios, indie product launches, lifestyle brands, small-business pitches.",
|
|
8255
|
+
source: { path: "design-templates/html-ppt-zhangzara-playful" }
|
|
8256
|
+
},
|
|
8257
|
+
{
|
|
8258
|
+
id: "od:template:html-ppt-zhangzara-raw-grid",
|
|
8259
|
+
kind: "template",
|
|
8260
|
+
name: "HTML PPT Zhangzara Raw Grid",
|
|
8261
|
+
description: "Raw Grid \u2014 neo-brutalist deck with thick borders, offset shadows, and a pink/sage/ink palette. For founder pitches, accelerator demos, brand decks, indie launches, creator portfolios.",
|
|
8262
|
+
source: { path: "design-templates/html-ppt-zhangzara-raw-grid" }
|
|
8263
|
+
},
|
|
8264
|
+
{
|
|
8265
|
+
id: "od:template:html-ppt-zhangzara-retro-windows",
|
|
8266
|
+
kind: "template",
|
|
8267
|
+
name: "HTML PPT Zhangzara Retro Windows",
|
|
8268
|
+
description: "Retro Windows \u2014 Windows 95 chrome: gray title bars, MS Sans Serif, pixel typography, full nostalgia. For retro gaming, Y2K-aesthetic brands, creator portfolios, tech-history talks.",
|
|
8269
|
+
source: { path: "design-templates/html-ppt-zhangzara-retro-windows" }
|
|
8270
|
+
},
|
|
8271
|
+
{
|
|
8272
|
+
id: "od:template:html-ppt-zhangzara-sakura-chroma",
|
|
8273
|
+
kind: "template",
|
|
8274
|
+
name: "HTML PPT Zhangzara Sakura Chroma",
|
|
8275
|
+
description: "Sakura Chroma \u2014 vintage Japanese cassette-package aesthetic: cream paper, diagonal rainbow ribbons, condensed bold type, JIS-style spec checkboxes. For analog / kawaii-tech decks.",
|
|
8276
|
+
source: { path: "design-templates/html-ppt-zhangzara-sakura-chroma" }
|
|
8277
|
+
},
|
|
8278
|
+
{
|
|
8279
|
+
id: "od:template:html-ppt-zhangzara-scatterbrain",
|
|
8280
|
+
kind: "template",
|
|
8281
|
+
name: "HTML PPT Zhangzara Scatterbrain",
|
|
8282
|
+
description: "Scatterbrain \u2014 Post-it inspired: pastel sticky notes, Caveat handwriting, Shrikhand + Zilla Slab. For brainstorms, workshops, creative-agency credentials, ideation pitches.",
|
|
8283
|
+
source: { path: "design-templates/html-ppt-zhangzara-scatterbrain" }
|
|
8284
|
+
},
|
|
8285
|
+
{
|
|
8286
|
+
id: "od:template:html-ppt-zhangzara-signal",
|
|
8287
|
+
kind: "template",
|
|
8288
|
+
name: "HTML PPT Zhangzara Signal",
|
|
8289
|
+
description: "Signal \u2014 deep navy canvas with bone paper and a single muted-gold accent; institutional with quiet weight. For investor decks, board presentations, consulting deliverables, legal briefs.",
|
|
8290
|
+
source: { path: "design-templates/html-ppt-zhangzara-signal" }
|
|
8291
|
+
},
|
|
8292
|
+
{
|
|
8293
|
+
id: "od:template:html-ppt-zhangzara-soft-editorial",
|
|
8294
|
+
kind: "template",
|
|
8295
|
+
name: "HTML PPT Zhangzara Soft Editorial",
|
|
8296
|
+
description: "Soft Editorial \u2014 Cormorant Garamond serif on warm paper with sage, blush, and lemon accents. For literary brand stories, gallery decks, advisory deliverables, lifestyle media.",
|
|
8297
|
+
source: { path: "design-templates/html-ppt-zhangzara-soft-editorial" }
|
|
8298
|
+
},
|
|
8299
|
+
{
|
|
8300
|
+
id: "od:template:html-ppt-zhangzara-stencil-tablet",
|
|
8301
|
+
kind: "template",
|
|
8302
|
+
name: "HTML PPT Zhangzara Stencil Tablet",
|
|
8303
|
+
description: "Stencil & Tablet \u2014 bone paper with stencil-cut headlines and a six-color earth palette. Archaeology meets brand: museum decks, art/architecture brands, heritage and craft work.",
|
|
8304
|
+
source: { path: "design-templates/html-ppt-zhangzara-stencil-tablet" }
|
|
8305
|
+
},
|
|
8306
|
+
{
|
|
8307
|
+
id: "od:template:html-ppt-zhangzara-studio",
|
|
8308
|
+
kind: "template",
|
|
8309
|
+
name: "HTML PPT Zhangzara Studio",
|
|
8310
|
+
description: "Studio \u2014 black canvas with electric-yellow type; high-voltage design studio aesthetic. For studio credentials, creative agency pitches, brand showcases, fashion / sneaker work.",
|
|
8311
|
+
source: { path: "design-templates/html-ppt-zhangzara-studio" }
|
|
8312
|
+
},
|
|
8313
|
+
{
|
|
8314
|
+
id: "od:template:html-ppt-zhangzara-vellum",
|
|
8315
|
+
kind: "template",
|
|
8316
|
+
name: "HTML PPT Zhangzara Vellum",
|
|
8317
|
+
description: "Vellum \u2014 deep navy canvas with warm-yellow italic Cormorant serifs and a single dusty teal accent. Quiet, scholarly aesthetic for research synthesis, white papers, advisory work.",
|
|
8318
|
+
source: { path: "design-templates/html-ppt-zhangzara-vellum" }
|
|
8319
|
+
},
|
|
8320
|
+
{
|
|
8321
|
+
id: "od:template:hyperframes",
|
|
8322
|
+
kind: "template",
|
|
8323
|
+
name: "Hyperframes",
|
|
8324
|
+
description: "HTML video composition skill \u2014 captions, voiceover, audio-reactive animation, scene transitions, and timing in HyperFrames HTML. For CLI commands see hyperframes-cli.",
|
|
8325
|
+
source: { path: "design-templates/hyperframes" }
|
|
8326
|
+
},
|
|
8327
|
+
{
|
|
8328
|
+
id: "od:template:ib-pitch-book",
|
|
8329
|
+
kind: "template",
|
|
8330
|
+
name: "Ib Pitch Book",
|
|
8331
|
+
description: "Investment-banking pitch book \u2014 trading comps, precedent transactions, valuation football field, DCF sensitivity, strategic-options matrix. For Board / sell-side discussion materials.",
|
|
8332
|
+
source: { path: "design-templates/ib-pitch-book" }
|
|
8333
|
+
},
|
|
8334
|
+
{
|
|
8335
|
+
id: "od:template:image-poster",
|
|
8336
|
+
kind: "template",
|
|
8337
|
+
name: "Image Poster",
|
|
8338
|
+
description: "Single-image generation skill for posters, key art, and editorial illustrations. Defaults to gpt-image-2 but is provider-agnostic \u2014 the same workflow drives Flux, Imagen, or Midjourney via the active upstream tooling. Output is one or mo\u2026",
|
|
8339
|
+
source: { path: "design-templates/image-poster" }
|
|
8340
|
+
},
|
|
8341
|
+
{
|
|
8342
|
+
id: "od:template:invoice",
|
|
8343
|
+
kind: "template",
|
|
8344
|
+
name: "Invoice",
|
|
8345
|
+
description: "A printable invoice page \u2014 sender + recipient block, line items table, tax breakdown, totals, and payment instructions.",
|
|
8346
|
+
source: { path: "design-templates/invoice" }
|
|
8347
|
+
},
|
|
8348
|
+
{
|
|
8349
|
+
id: "od:template:kami-deck",
|
|
8350
|
+
kind: "template",
|
|
8351
|
+
name: "Kami Deck",
|
|
8352
|
+
description: "Produce a print-grade slide deck in the kami (\u7D19 / \u7EB8) design system \u2014 warm parchment background (or ink-blue for cover / chapter slides), serif at one weight, ink-blue accent \u2264 5% per slide, no italic. Horizontal magazine swipe pagination\u2026",
|
|
8353
|
+
source: { path: "design-templates/kami-deck" }
|
|
8354
|
+
},
|
|
8355
|
+
{
|
|
8356
|
+
id: "od:template:kami-landing",
|
|
8357
|
+
kind: "template",
|
|
8358
|
+
name: "Kami Landing",
|
|
8359
|
+
description: "Produce a print-grade single-page kami (\u7D19 / \u7EB8) document \u2014 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. Multili\u2026",
|
|
8360
|
+
source: { path: "design-templates/kami-landing" }
|
|
8361
|
+
},
|
|
8362
|
+
{
|
|
8363
|
+
id: "od:template:kanban-board",
|
|
8364
|
+
kind: "template",
|
|
8365
|
+
name: "Kanban Board",
|
|
8366
|
+
description: "Kanban / task board with columns (To do / In progress / In review / Done), draggable-looking cards, assignee avatars, swimlanes, and a top filter bar.",
|
|
8367
|
+
source: { path: "design-templates/kanban-board" }
|
|
8368
|
+
},
|
|
8369
|
+
{
|
|
8370
|
+
id: "od:template:last30days",
|
|
8371
|
+
kind: "template",
|
|
8372
|
+
name: "Last30days",
|
|
8373
|
+
description: "Recent community and social trend research over the last 30 days.",
|
|
8374
|
+
source: { path: "design-templates/last30days" }
|
|
8375
|
+
},
|
|
8376
|
+
{
|
|
8377
|
+
id: "od:template:live-artifact",
|
|
8378
|
+
kind: "template",
|
|
8379
|
+
name: "Live Artifact",
|
|
8380
|
+
description: "Create refreshable, auditable Open Design artifacts backed by connector or local data. Trigger when the user asks for live dashboards, refreshable reports, synced views, or reusable data-backed artifacts.",
|
|
8381
|
+
source: { path: "design-templates/live-artifact" }
|
|
8382
|
+
},
|
|
8383
|
+
{
|
|
8384
|
+
id: "od:template:live-dashboard",
|
|
8385
|
+
kind: "template",
|
|
8386
|
+
name: "Live Dashboard",
|
|
8387
|
+
description: "Notion-style team dashboard as a Live Artifact \u2014 KPIs, 7-day sparkline, activity feed, and a linked-database task table wired to Notion via Composio. Refreshable, with mock fallback.",
|
|
8388
|
+
source: { path: "design-templates/live-dashboard" }
|
|
8389
|
+
},
|
|
8390
|
+
{
|
|
8391
|
+
id: "od:template:magazine-poster",
|
|
8392
|
+
kind: "template",
|
|
8393
|
+
name: "Magazine Poster",
|
|
8394
|
+
description: "An editorial-style poster \u2014 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 a Sunday-paper fu\u2026",
|
|
8395
|
+
source: { path: "design-templates/magazine-poster" }
|
|
8396
|
+
},
|
|
8397
|
+
{
|
|
8398
|
+
id: "od:template:meeting-notes",
|
|
8399
|
+
kind: "template",
|
|
8400
|
+
name: "Meeting Notes",
|
|
8401
|
+
description: 'Meeting notes page \u2014 title bar with attendees, agenda checklist, decisions block, action items table with owners + dates, and a "next meeting" footer.',
|
|
8402
|
+
source: { path: "design-templates/meeting-notes" }
|
|
8403
|
+
},
|
|
8404
|
+
{
|
|
8405
|
+
id: "od:template:mobile-onboarding",
|
|
8406
|
+
kind: "template",
|
|
8407
|
+
name: "Mobile Onboarding",
|
|
8408
|
+
description: "A multi-screen mobile onboarding flow rendered as three phone frames side by side \u2014 splash, value-prop, sign-in. Status bar, swipe dots, primary CTA.",
|
|
8409
|
+
source: { path: "design-templates/mobile-onboarding" }
|
|
8410
|
+
},
|
|
8411
|
+
{
|
|
8412
|
+
id: "od:template:motion-frames",
|
|
8413
|
+
kind: "template",
|
|
8414
|
+
name: "Motion Frames",
|
|
8415
|
+
description: "A single-frame motion-design composition with looping CSS animations \u2014 rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter.",
|
|
8416
|
+
source: { path: "design-templates/motion-frames" }
|
|
8417
|
+
},
|
|
8418
|
+
{
|
|
8419
|
+
id: "od:template:open-design-landing",
|
|
8420
|
+
kind: "template",
|
|
8421
|
+
name: "Open Design Landing",
|
|
8422
|
+
description: "Single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / \xC9tudes collage). Composes from a typed inputs.json with optional gpt-image-2 assets.",
|
|
8423
|
+
source: { path: "design-templates/open-design-landing" }
|
|
8424
|
+
},
|
|
8425
|
+
{
|
|
8426
|
+
id: "od:template:open-design-landing-deck",
|
|
8427
|
+
kind: "template",
|
|
8428
|
+
name: "Open Design Landing Deck",
|
|
8429
|
+
description: "Single-file slide deck in the Atelier Zero visual language \u2014 warm-paper, italic-serif emphasis, coral terminating dots, surreal collage. Horizontal swipe + ESC overview grid.",
|
|
8430
|
+
source: { path: "design-templates/open-design-landing-deck" }
|
|
8431
|
+
},
|
|
8432
|
+
{
|
|
8433
|
+
id: "od:template:orbit-general",
|
|
8434
|
+
kind: "template",
|
|
8435
|
+
name: "Orbit General",
|
|
8436
|
+
description: "Open Orbit daily digest \u2014 pulls 24h activity from every connected connector (GitHub, Linear, Notion, Slack, \u2026) into a bento-grid dashboard. Invoked by the Orbit scheduler.",
|
|
8437
|
+
source: { path: "design-templates/orbit-general" }
|
|
8438
|
+
},
|
|
8439
|
+
{
|
|
8440
|
+
id: "od:template:orbit-github",
|
|
8441
|
+
kind: "template",
|
|
8442
|
+
name: "Orbit Github",
|
|
8443
|
+
description: "Open Orbit GitHub digest \u2014 24h of PRs, reviews, issues, CI, and merges rendered in GitHub's native Notifications + PR-diff visual language. Invoked by the Orbit scheduler.",
|
|
8444
|
+
source: { path: "design-templates/orbit-github" }
|
|
8445
|
+
},
|
|
8446
|
+
{
|
|
8447
|
+
id: "od:template:orbit-gmail",
|
|
8448
|
+
kind: "template",
|
|
8449
|
+
name: "Orbit Gmail",
|
|
8450
|
+
description: "Open Orbit Gmail digest \u2014 24h of inbox activity (replies, mentions, cc, bulk) rendered as the Orbit Daily Digest email inside Gmail's reading view. Invoked by the Orbit scheduler.",
|
|
8451
|
+
source: { path: "design-templates/orbit-gmail" }
|
|
8452
|
+
},
|
|
8453
|
+
{
|
|
8454
|
+
id: "od:template:orbit-linear",
|
|
8455
|
+
kind: "template",
|
|
8456
|
+
name: "Orbit Linear",
|
|
8457
|
+
description: "Open Orbit Linear digest \u2014 24h of issue movement, status changes, assignments, and cycle progress in Linear's native Inbox + cycle visual language. Invoked by the Orbit scheduler.",
|
|
8458
|
+
source: { path: "design-templates/orbit-linear" }
|
|
8459
|
+
},
|
|
8460
|
+
{
|
|
8461
|
+
id: "od:template:orbit-notion",
|
|
8462
|
+
kind: "template",
|
|
8463
|
+
name: "Orbit Notion",
|
|
8464
|
+
description: "Open Orbit Notion digest \u2014 24h of doc edits, comments, mentions, and database row changes rendered as a native Notion page. Invoked by the Orbit scheduler.",
|
|
8465
|
+
source: { path: "design-templates/orbit-notion" }
|
|
8466
|
+
},
|
|
8467
|
+
{
|
|
8468
|
+
id: "od:template:pm-spec",
|
|
8469
|
+
kind: "template",
|
|
8470
|
+
name: "Pm Spec",
|
|
8471
|
+
description: "Product spec / PRD as a single page \u2014 problem, success metrics, scope, user stories, design notes, rollout plan, open questions.",
|
|
8472
|
+
source: { path: "design-templates/pm-spec" }
|
|
8473
|
+
},
|
|
8474
|
+
{
|
|
8475
|
+
id: "od:template:pricing-page",
|
|
8476
|
+
kind: "template",
|
|
8477
|
+
name: "Pricing Page",
|
|
8478
|
+
description: "A standalone pricing page \u2014 header, plan tiers, feature comparison table, and an FAQ.",
|
|
8479
|
+
source: { path: "design-templates/pricing-page" }
|
|
8480
|
+
},
|
|
8481
|
+
{
|
|
8482
|
+
id: "od:template:replit-deck",
|
|
8483
|
+
kind: "template",
|
|
8484
|
+
name: "Replit Deck",
|
|
8485
|
+
description: "Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery. Eight distinct themes (helix, holm, vance, bevel, world-dark, world-mint, atlas, bluehouse) \u2014 each a complete visual system (palette +\u2026",
|
|
8486
|
+
source: { path: "design-templates/replit-deck" }
|
|
8487
|
+
},
|
|
8488
|
+
{
|
|
8489
|
+
id: "od:template:saas-landing",
|
|
8490
|
+
kind: "template",
|
|
8491
|
+
name: "Saas Landing",
|
|
8492
|
+
description: "Single-page SaaS landing with hero, features, social proof, pricing, and CTA. Respects the active DESIGN.md color/typography/layout tokens.",
|
|
8493
|
+
source: { path: "design-templates/saas-landing" }
|
|
8494
|
+
},
|
|
8495
|
+
{
|
|
8496
|
+
id: "od:template:simple-deck",
|
|
8497
|
+
kind: "template",
|
|
8498
|
+
name: "Simple Deck",
|
|
8499
|
+
description: "Single-file horizontal-swipe HTML deck. Built by copying the seed `assets/template.html` (which carries the proven 5-rule iframe nav script) and pasting slide layouts from `references/layouts.md`. Pitch decks, product overviews, study ma\u2026",
|
|
8500
|
+
source: { path: "design-templates/simple-deck" }
|
|
8501
|
+
},
|
|
8502
|
+
{
|
|
8503
|
+
id: "od:template:social-carousel",
|
|
8504
|
+
kind: "template",
|
|
8505
|
+
name: "Social Carousel",
|
|
8506
|
+
description: 'A three-card social-media carousel laid out as 1080\xD71080 squares \u2014 three cinematic, on-brand panels with display headlines that connect across the series ("onwards." \u2192 "to the next one." \u2192 "looking ahead."). Each card has a brand mark, a\u2026',
|
|
8507
|
+
source: { path: "design-templates/social-carousel" }
|
|
8508
|
+
},
|
|
8509
|
+
{
|
|
8510
|
+
id: "od:template:social-media-dashboard",
|
|
8511
|
+
kind: "template",
|
|
8512
|
+
name: "Social Media Dashboard",
|
|
8513
|
+
description: '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, a "top post this w\u2026',
|
|
8514
|
+
source: { path: "design-templates/social-media-dashboard" }
|
|
8515
|
+
},
|
|
8516
|
+
{
|
|
8517
|
+
id: "od:template:social-media-matrix-tracker-template",
|
|
8518
|
+
kind: "template",
|
|
8519
|
+
name: "Social Media Matrix Tracker Template",
|
|
8520
|
+
description: "\u793E\u5A92\u77E9\u9635\u6570\u636E\u8FFD\u8E2A\u9762\u677F\u6A21\u677F\uFF08Social Media Matrix Tracker\uFF09\u3002",
|
|
8521
|
+
source: { path: "design-templates/social-media-matrix-tracker-template" }
|
|
8522
|
+
},
|
|
8523
|
+
{
|
|
8524
|
+
id: "od:template:sprite-animation",
|
|
8525
|
+
kind: "template",
|
|
8526
|
+
name: "Sprite Animation",
|
|
8527
|
+
description: "A pixel / sprite-style animated explainer slide \u2014 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 ribbon. Reads like a\u2026",
|
|
8528
|
+
source: { path: "design-templates/sprite-animation" }
|
|
8529
|
+
},
|
|
8530
|
+
{
|
|
8531
|
+
id: "od:template:team-okrs",
|
|
8532
|
+
kind: "template",
|
|
8533
|
+
name: "Team Okrs",
|
|
8534
|
+
description: 'OKR tracker page \u2014 quarter banner, three objectives with their key results as progress bars, owner avatars, status pills, and a "this quarter at a glance" sidebar.',
|
|
8535
|
+
source: { path: "design-templates/team-okrs" }
|
|
8536
|
+
},
|
|
8537
|
+
{
|
|
8538
|
+
id: "od:template:trading-analysis-dashboard-template",
|
|
8539
|
+
kind: "template",
|
|
8540
|
+
name: "Trading Analysis Dashboard Template",
|
|
8541
|
+
description: "Professional trading analysis dashboard template (single-file HTML) with light/dark theme switch, dense market panels, chart interactions, demo/live playback, and command palette behavior.",
|
|
8542
|
+
source: { path: "design-templates/trading-analysis-dashboard-template" }
|
|
8543
|
+
},
|
|
8544
|
+
{
|
|
8545
|
+
id: "od:template:tweaks",
|
|
8546
|
+
kind: "template",
|
|
8547
|
+
name: "Tweaks",
|
|
8548
|
+
description: "Wrap any HTML artifact with a side panel of live, parameterized controls \u2014 accent color, type scale, density, motion, theme \u2014 that rewrite CSS custom properties in real time and persist to localStorage. Lets the user explore variants of\u2026",
|
|
8549
|
+
source: { path: "design-templates/tweaks" }
|
|
8550
|
+
},
|
|
8551
|
+
{
|
|
8552
|
+
id: "od:template:video-shortform",
|
|
8553
|
+
kind: "template",
|
|
8554
|
+
name: "Video Shortform",
|
|
8555
|
+
description: "Short-form video generation skill \u2014 3-10 second clips for product reveals, motion teasers, ambient loops. Defaults to Seedance 2 but works the same with Kling 3 / 4, Veo 3 or Sora 2. Output is one MP4 saved to the project folder. When th\u2026",
|
|
8556
|
+
source: { path: "design-templates/video-shortform" }
|
|
8557
|
+
},
|
|
8558
|
+
{
|
|
8559
|
+
id: "od:template:waitlist-page",
|
|
8560
|
+
kind: "template",
|
|
8561
|
+
name: "Waitlist Page",
|
|
8562
|
+
description: "Minimal pre-launch landing with email capture, brand logo, and optional decorative layer. Reads DESIGN.md for colors, typography, and layout rules.",
|
|
8563
|
+
source: { path: "design-templates/waitlist-page" }
|
|
8564
|
+
},
|
|
8565
|
+
{
|
|
8566
|
+
id: "od:template:web-prototype",
|
|
8567
|
+
kind: "template",
|
|
8568
|
+
name: "Web Prototype",
|
|
8569
|
+
description: "General-purpose desktop web prototype. Single self-contained HTML file built by copying the seed `assets/template.html` and pasting section layouts from `references/layouts.md`. Default for any landing / marketing / docs / SaaS page when\u2026",
|
|
8570
|
+
source: { path: "design-templates/web-prototype" }
|
|
8571
|
+
},
|
|
8572
|
+
{
|
|
8573
|
+
id: "od:template:web-prototype-taste-brutalist",
|
|
8574
|
+
kind: "template",
|
|
8575
|
+
name: "Web Prototype Taste Brutalist",
|
|
8576
|
+
description: "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` (Sw\u2026",
|
|
8577
|
+
source: { path: "design-templates/web-prototype-taste-brutalist" }
|
|
8578
|
+
},
|
|
8579
|
+
{
|
|
8580
|
+
id: "od:template:web-prototype-taste-soft",
|
|
8581
|
+
kind: "template",
|
|
8582
|
+
name: "Web Prototype Taste Soft",
|
|
8583
|
+
description: "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\u20138 of `taste-skill`.",
|
|
8584
|
+
source: { path: "design-templates/web-prototype-taste-soft" }
|
|
8585
|
+
},
|
|
8586
|
+
{
|
|
8587
|
+
id: "od:template:wireframe-sketch",
|
|
8588
|
+
kind: "template",
|
|
8589
|
+
name: "Wireframe Sketch",
|
|
8590
|
+
description: "A hand-drawn wireframe exploration \u2014 graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations, scribbled chart placeholders, hatched fills. Reads like a designer's whiteboard before any pixe\u2026",
|
|
8591
|
+
source: { path: "design-templates/wireframe-sketch" }
|
|
8592
|
+
},
|
|
8593
|
+
{
|
|
8594
|
+
id: "od:template:x-research",
|
|
8595
|
+
kind: "template",
|
|
8596
|
+
name: "X Research",
|
|
8597
|
+
description: "X/Twitter public sentiment research for recent market, company, product, or community discourse.",
|
|
8598
|
+
source: { path: "design-templates/x-research" }
|
|
8599
|
+
},
|
|
8600
|
+
{
|
|
8601
|
+
id: "od:design-system:dashboard",
|
|
8602
|
+
kind: "design-system",
|
|
8603
|
+
name: "Dashboard",
|
|
8604
|
+
description: "Dark cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.",
|
|
8605
|
+
source: { path: "design-systems/dashboard" }
|
|
8606
|
+
},
|
|
8607
|
+
{
|
|
8608
|
+
id: "od:design-system:trading-terminal",
|
|
8609
|
+
kind: "design-system",
|
|
8610
|
+
name: "Trading Terminal",
|
|
8611
|
+
description: "Bloomberg-style financial trading terminal: dark-only, data-dense, with cyan and coral buy/sell signals readable at a glance.",
|
|
8612
|
+
source: { path: "design-systems/trading-terminal" }
|
|
8613
|
+
},
|
|
8614
|
+
{
|
|
8615
|
+
id: "od:design-system:warm-editorial",
|
|
8616
|
+
kind: "design-system",
|
|
8617
|
+
name: "Warm Editorial",
|
|
8618
|
+
description: "Serif-led magazine aesthetic with terracotta accents on warm off-white paper for readable narrative pages, zines, and reports.",
|
|
8619
|
+
source: { path: "design-systems/warm-editorial" }
|
|
8620
|
+
},
|
|
8621
|
+
{
|
|
8622
|
+
id: "od:design-system:editorial",
|
|
8623
|
+
kind: "design-system",
|
|
8624
|
+
name: "Editorial",
|
|
8625
|
+
description: "Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.",
|
|
8626
|
+
source: { path: "design-systems/editorial" }
|
|
8627
|
+
},
|
|
8628
|
+
{
|
|
8629
|
+
id: "od:design-system:mono",
|
|
8630
|
+
kind: "design-system",
|
|
8631
|
+
name: "Mono",
|
|
8632
|
+
description: "Monospace-driven, matrix-inspired design with high-contrast elements, compact density, and a hacker-chic aesthetic.",
|
|
8633
|
+
source: { path: "design-systems/mono" }
|
|
8634
|
+
},
|
|
8635
|
+
{
|
|
8636
|
+
id: "od:design-system:apple",
|
|
8637
|
+
kind: "design-system",
|
|
8638
|
+
name: "Apple",
|
|
8639
|
+
description: "Consumer electronics design system with premium white space, SF Pro-style typography, and cinematic imagery.",
|
|
8640
|
+
source: { path: "design-systems/apple" }
|
|
8641
|
+
},
|
|
8642
|
+
{
|
|
8643
|
+
id: "od:design-system:agentic",
|
|
8644
|
+
kind: "design-system",
|
|
8645
|
+
name: "Agentic",
|
|
8646
|
+
description: "Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.",
|
|
8647
|
+
source: { path: "design-systems/agentic" }
|
|
8648
|
+
},
|
|
8649
|
+
{
|
|
8650
|
+
id: "od:design-system:airbnb",
|
|
8651
|
+
kind: "design-system",
|
|
8652
|
+
name: "Airbnb",
|
|
8653
|
+
description: "Travel marketplace. Warm coral accent, photography-driven, rounded UI.",
|
|
8654
|
+
source: { path: "design-systems/airbnb" }
|
|
8655
|
+
},
|
|
8656
|
+
{
|
|
8657
|
+
id: "od:design-system:airtable",
|
|
8658
|
+
kind: "design-system",
|
|
8659
|
+
name: "Airtable",
|
|
8660
|
+
description: "Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic.",
|
|
8661
|
+
source: { path: "design-systems/airtable" }
|
|
8662
|
+
},
|
|
8663
|
+
{
|
|
8664
|
+
id: "od:design-system:ant",
|
|
8665
|
+
kind: "design-system",
|
|
8666
|
+
name: "Ant",
|
|
8667
|
+
description: "Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.",
|
|
8668
|
+
source: { path: "design-systems/ant" }
|
|
8669
|
+
},
|
|
8670
|
+
{
|
|
8671
|
+
id: "od:design-system:application",
|
|
8672
|
+
kind: "design-system",
|
|
8673
|
+
name: "Application",
|
|
8674
|
+
description: "App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.",
|
|
8675
|
+
source: { path: "design-systems/application" }
|
|
8676
|
+
},
|
|
8677
|
+
{
|
|
8678
|
+
id: "od:design-system:arc",
|
|
8679
|
+
kind: "design-system",
|
|
8680
|
+
name: "Arc",
|
|
8681
|
+
description: '"The browser that browses for you." Translucent surfaces, gradient warmth, sidebar-first layout.',
|
|
8682
|
+
source: { path: "design-systems/arc" }
|
|
8683
|
+
},
|
|
8684
|
+
{
|
|
8685
|
+
id: "od:design-system:artistic",
|
|
8686
|
+
kind: "design-system",
|
|
8687
|
+
name: "Artistic",
|
|
8688
|
+
description: "High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.",
|
|
8689
|
+
source: { path: "design-systems/artistic" }
|
|
8690
|
+
},
|
|
8691
|
+
{
|
|
8692
|
+
id: "od:design-system:atelier-zero",
|
|
8693
|
+
kind: "design-system",
|
|
8694
|
+
name: "Atelier Zero",
|
|
8695
|
+
description: "A magazine-grade, collage-driven visual system: warm paper canvas, surreal.",
|
|
8696
|
+
source: { path: "design-systems/atelier-zero" }
|
|
8697
|
+
},
|
|
8698
|
+
{
|
|
8699
|
+
id: "od:design-system:bento",
|
|
8700
|
+
kind: "design-system",
|
|
8701
|
+
name: "Bento",
|
|
8702
|
+
description: "Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.",
|
|
8703
|
+
source: { path: "design-systems/bento" }
|
|
8704
|
+
},
|
|
8705
|
+
{
|
|
8706
|
+
id: "od:design-system:binance",
|
|
8707
|
+
kind: "design-system",
|
|
8708
|
+
name: "Binance",
|
|
8709
|
+
description: "Crypto exchange. Bold yellow accent on monochrome, trading-floor urgency.",
|
|
8710
|
+
source: { path: "design-systems/binance" }
|
|
8711
|
+
},
|
|
8712
|
+
{
|
|
8713
|
+
id: "od:design-system:bmw",
|
|
8714
|
+
kind: "design-system",
|
|
8715
|
+
name: "Bmw",
|
|
8716
|
+
description: "Luxury automotive. Dark premium surfaces, precise German engineering aesthetic.",
|
|
8717
|
+
source: { path: "design-systems/bmw" }
|
|
8718
|
+
},
|
|
8719
|
+
{
|
|
8720
|
+
id: "od:design-system:bmw-m",
|
|
8721
|
+
kind: "design-system",
|
|
8722
|
+
name: "Bmw M",
|
|
8723
|
+
description: "Motorsport performance sub-brand. Near-black cockpit surfaces, BMW M tricolor accents, sharp engineering geometry.",
|
|
8724
|
+
source: { path: "design-systems/bmw-m" }
|
|
8725
|
+
},
|
|
8726
|
+
{
|
|
8727
|
+
id: "od:design-system:bold",
|
|
8728
|
+
kind: "design-system",
|
|
8729
|
+
name: "Bold",
|
|
8730
|
+
description: "Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.",
|
|
8731
|
+
source: { path: "design-systems/bold" }
|
|
8732
|
+
},
|
|
8733
|
+
{
|
|
8734
|
+
id: "od:design-system:brutalism",
|
|
8735
|
+
kind: "design-system",
|
|
8736
|
+
name: "Brutalism",
|
|
8737
|
+
description: "Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.",
|
|
8738
|
+
source: { path: "design-systems/brutalism" }
|
|
8739
|
+
},
|
|
8740
|
+
{
|
|
8741
|
+
id: "od:design-system:bugatti",
|
|
8742
|
+
kind: "design-system",
|
|
8743
|
+
name: "Bugatti",
|
|
8744
|
+
description: "Hypercar brand. Cinema-black canvas, monochrome austerity, monumental display type.",
|
|
8745
|
+
source: { path: "design-systems/bugatti" }
|
|
8746
|
+
},
|
|
8747
|
+
{
|
|
8748
|
+
id: "od:design-system:cafe",
|
|
8749
|
+
kind: "design-system",
|
|
8750
|
+
name: "Cafe",
|
|
8751
|
+
description: "Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.",
|
|
8752
|
+
source: { path: "design-systems/cafe" }
|
|
8753
|
+
},
|
|
8754
|
+
{
|
|
8755
|
+
id: "od:design-system:cal",
|
|
8756
|
+
kind: "design-system",
|
|
8757
|
+
name: "Cal",
|
|
8758
|
+
description: "Open-source scheduling. Clean neutral UI, developer-oriented simplicity.",
|
|
8759
|
+
source: { path: "design-systems/cal" }
|
|
8760
|
+
},
|
|
8761
|
+
{
|
|
8762
|
+
id: "od:design-system:canva",
|
|
8763
|
+
kind: "design-system",
|
|
8764
|
+
name: "Canva",
|
|
8765
|
+
description: "Visual creation platform. Vivid purple-blue gradient, generous spacing, friendly geometry.",
|
|
8766
|
+
source: { path: "design-systems/canva" }
|
|
8767
|
+
},
|
|
8768
|
+
{
|
|
8769
|
+
id: "od:design-system:cisco",
|
|
8770
|
+
kind: "design-system",
|
|
8771
|
+
name: "Cisco",
|
|
8772
|
+
description: "Enterprise infrastructure brand. Dark trust surfaces, Cisco Blue signal, technical clarity.",
|
|
8773
|
+
source: { path: "design-systems/cisco" }
|
|
8774
|
+
},
|
|
8775
|
+
{
|
|
8776
|
+
id: "od:design-system:claude",
|
|
8777
|
+
kind: "design-system",
|
|
8778
|
+
name: "Claude",
|
|
8779
|
+
description: "Anthropic's AI assistant. Warm terracotta accent, clean editorial layout.",
|
|
8780
|
+
source: { path: "design-systems/claude" }
|
|
8781
|
+
},
|
|
8782
|
+
{
|
|
8783
|
+
id: "od:design-system:clay",
|
|
8784
|
+
kind: "design-system",
|
|
8785
|
+
name: "Clay",
|
|
8786
|
+
description: "Creative agency. Organic shapes, soft gradients, art-directed layout.",
|
|
8787
|
+
source: { path: "design-systems/clay" }
|
|
8788
|
+
},
|
|
8789
|
+
{
|
|
8790
|
+
id: "od:design-system:claymorphism",
|
|
8791
|
+
kind: "design-system",
|
|
8792
|
+
name: "Claymorphism",
|
|
8793
|
+
description: "Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.",
|
|
8794
|
+
source: { path: "design-systems/claymorphism" }
|
|
8795
|
+
},
|
|
8796
|
+
{
|
|
8797
|
+
id: "od:design-system:clean",
|
|
8798
|
+
kind: "design-system",
|
|
8799
|
+
name: "Clean",
|
|
8800
|
+
description: "Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.",
|
|
8801
|
+
source: { path: "design-systems/clean" }
|
|
8802
|
+
},
|
|
8803
|
+
{
|
|
8804
|
+
id: "od:design-system:clickhouse",
|
|
8805
|
+
kind: "design-system",
|
|
8806
|
+
name: "Clickhouse",
|
|
8807
|
+
description: "Fast analytics database. Yellow-accented, technical documentation style.",
|
|
8808
|
+
source: { path: "design-systems/clickhouse" }
|
|
8809
|
+
},
|
|
8810
|
+
{
|
|
8811
|
+
id: "od:design-system:cohere",
|
|
8812
|
+
kind: "design-system",
|
|
8813
|
+
name: "Cohere",
|
|
8814
|
+
description: "Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic.",
|
|
8815
|
+
source: { path: "design-systems/cohere" }
|
|
8816
|
+
},
|
|
8817
|
+
{
|
|
8818
|
+
id: "od:design-system:coinbase",
|
|
8819
|
+
kind: "design-system",
|
|
8820
|
+
name: "Coinbase",
|
|
8821
|
+
description: "Crypto exchange. Clean blue identity, trust-focused, institutional feel.",
|
|
8822
|
+
source: { path: "design-systems/coinbase" }
|
|
8823
|
+
},
|
|
8824
|
+
{
|
|
8825
|
+
id: "od:design-system:colorful",
|
|
8826
|
+
kind: "design-system",
|
|
8827
|
+
name: "Colorful",
|
|
8828
|
+
description: "Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.",
|
|
8829
|
+
source: { path: "design-systems/colorful" }
|
|
8830
|
+
},
|
|
8831
|
+
{
|
|
8832
|
+
id: "od:design-system:composio",
|
|
8833
|
+
kind: "design-system",
|
|
8834
|
+
name: "Composio",
|
|
8835
|
+
description: "Tool integration platform. Modern dark with colorful integration icons.",
|
|
8836
|
+
source: { path: "design-systems/composio" }
|
|
8837
|
+
},
|
|
8838
|
+
{
|
|
8839
|
+
id: "od:design-system:contemporary",
|
|
8840
|
+
kind: "design-system",
|
|
8841
|
+
name: "Contemporary",
|
|
8842
|
+
description: "Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.",
|
|
8843
|
+
source: { path: "design-systems/contemporary" }
|
|
8844
|
+
},
|
|
8845
|
+
{
|
|
8846
|
+
id: "od:design-system:corporate",
|
|
8847
|
+
kind: "design-system",
|
|
8848
|
+
name: "Corporate",
|
|
8849
|
+
description: "Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.",
|
|
8850
|
+
source: { path: "design-systems/corporate" }
|
|
8851
|
+
},
|
|
8852
|
+
{
|
|
8853
|
+
id: "od:design-system:cosmic",
|
|
8854
|
+
kind: "design-system",
|
|
8855
|
+
name: "Cosmic",
|
|
8856
|
+
description: "Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.",
|
|
8857
|
+
source: { path: "design-systems/cosmic" }
|
|
8858
|
+
},
|
|
8859
|
+
{
|
|
8860
|
+
id: "od:design-system:creative",
|
|
8861
|
+
kind: "design-system",
|
|
8862
|
+
name: "Creative",
|
|
8863
|
+
description: "Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.",
|
|
8864
|
+
source: { path: "design-systems/creative" }
|
|
8865
|
+
},
|
|
8866
|
+
{
|
|
8867
|
+
id: "od:design-system:cursor",
|
|
8868
|
+
kind: "design-system",
|
|
8869
|
+
name: "Cursor",
|
|
8870
|
+
description: "AI-first code editor. Sleek dark interface, gradient accents.",
|
|
8871
|
+
source: { path: "design-systems/cursor" }
|
|
8872
|
+
},
|
|
8873
|
+
{
|
|
8874
|
+
id: "od:design-system:default",
|
|
8875
|
+
kind: "design-system",
|
|
8876
|
+
name: "Default",
|
|
8877
|
+
description: "A clean, product-oriented default.",
|
|
8878
|
+
source: { path: "design-systems/default" }
|
|
8879
|
+
},
|
|
8880
|
+
{
|
|
8881
|
+
id: "od:design-system:discord",
|
|
8882
|
+
kind: "design-system",
|
|
8883
|
+
name: "Discord",
|
|
8884
|
+
description: "Voice / chat platform. Deep blurple, dark-first surfaces, playful accent moments.",
|
|
8885
|
+
source: { path: "design-systems/discord" }
|
|
8886
|
+
},
|
|
8887
|
+
{
|
|
8888
|
+
id: "od:design-system:dithered",
|
|
8889
|
+
kind: "design-system",
|
|
8890
|
+
name: "Dithered",
|
|
8891
|
+
description: "Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.",
|
|
8892
|
+
source: { path: "design-systems/dithered" }
|
|
8893
|
+
},
|
|
8894
|
+
{
|
|
8895
|
+
id: "od:design-system:doodle",
|
|
8896
|
+
kind: "design-system",
|
|
8897
|
+
name: "Doodle",
|
|
8898
|
+
description: "Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.",
|
|
8899
|
+
source: { path: "design-systems/doodle" }
|
|
8900
|
+
},
|
|
8901
|
+
{
|
|
8902
|
+
id: "od:design-system:dramatic",
|
|
8903
|
+
kind: "design-system",
|
|
8904
|
+
name: "Dramatic",
|
|
8905
|
+
description: "High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.",
|
|
8906
|
+
source: { path: "design-systems/dramatic" }
|
|
8907
|
+
},
|
|
8908
|
+
{
|
|
8909
|
+
id: "od:design-system:duolingo",
|
|
8910
|
+
kind: "design-system",
|
|
8911
|
+
name: "Duolingo",
|
|
8912
|
+
description: "Language-learning platform. Bright owl green, chunky shadows, gamified joy.",
|
|
8913
|
+
source: { path: "design-systems/duolingo" }
|
|
8914
|
+
},
|
|
8915
|
+
{
|
|
8916
|
+
id: "od:design-system:elegant",
|
|
8917
|
+
kind: "design-system",
|
|
8918
|
+
name: "Elegant",
|
|
8919
|
+
description: "Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication.",
|
|
8920
|
+
source: { path: "design-systems/elegant" }
|
|
8921
|
+
},
|
|
8922
|
+
{
|
|
8923
|
+
id: "od:design-system:elevenlabs",
|
|
8924
|
+
kind: "design-system",
|
|
8925
|
+
name: "Elevenlabs",
|
|
8926
|
+
description: "AI voice platform. Dark cinematic UI, audio-waveform aesthetics.",
|
|
8927
|
+
source: { path: "design-systems/elevenlabs" }
|
|
8928
|
+
},
|
|
8929
|
+
{
|
|
8930
|
+
id: "od:design-system:energetic",
|
|
8931
|
+
kind: "design-system",
|
|
8932
|
+
name: "Energetic",
|
|
8933
|
+
description: "Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.",
|
|
8934
|
+
source: { path: "design-systems/energetic" }
|
|
8935
|
+
},
|
|
8936
|
+
{
|
|
8937
|
+
id: "od:design-system:enterprise",
|
|
8938
|
+
kind: "design-system",
|
|
8939
|
+
name: "Enterprise",
|
|
8940
|
+
description: "Clean, high-contrast enterprise design for data-driven workflows with intuitive drag-and-drop patterns and structured layouts.",
|
|
8941
|
+
source: { path: "design-systems/enterprise" }
|
|
8942
|
+
},
|
|
8943
|
+
{
|
|
8944
|
+
id: "od:design-system:expo",
|
|
8945
|
+
kind: "design-system",
|
|
8946
|
+
name: "Expo",
|
|
8947
|
+
description: "React Native platform. Dark theme, tight letter-spacing, code-centric.",
|
|
8948
|
+
source: { path: "design-systems/expo" }
|
|
8949
|
+
},
|
|
8950
|
+
{
|
|
8951
|
+
id: "od:design-system:expressive",
|
|
8952
|
+
kind: "design-system",
|
|
8953
|
+
name: "Expressive",
|
|
8954
|
+
description: "Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.",
|
|
8955
|
+
source: { path: "design-systems/expressive" }
|
|
8956
|
+
},
|
|
8957
|
+
{
|
|
8958
|
+
id: "od:design-system:fantasy",
|
|
8959
|
+
kind: "design-system",
|
|
8960
|
+
name: "Fantasy",
|
|
8961
|
+
description: "Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.",
|
|
8962
|
+
source: { path: "design-systems/fantasy" }
|
|
8963
|
+
},
|
|
8964
|
+
{
|
|
8965
|
+
id: "od:design-system:ferrari",
|
|
8966
|
+
kind: "design-system",
|
|
8967
|
+
name: "Ferrari",
|
|
8968
|
+
description: "Luxury automotive. Chiaroscuro editorial, Ferrari Red accents, cinematic black.",
|
|
8969
|
+
source: { path: "design-systems/ferrari" }
|
|
8970
|
+
},
|
|
8971
|
+
{
|
|
8972
|
+
id: "od:design-system:figma",
|
|
8973
|
+
kind: "design-system",
|
|
8974
|
+
name: "Figma",
|
|
8975
|
+
description: "Collaborative design tool. Vibrant multi-color, playful yet professional.",
|
|
8976
|
+
source: { path: "design-systems/figma" }
|
|
8977
|
+
},
|
|
8978
|
+
{
|
|
8979
|
+
id: "od:design-system:flat",
|
|
8980
|
+
kind: "design-system",
|
|
8981
|
+
name: "Flat",
|
|
8982
|
+
description: "Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.",
|
|
8983
|
+
source: { path: "design-systems/flat" }
|
|
8984
|
+
},
|
|
8985
|
+
{
|
|
8986
|
+
id: "od:design-system:framer",
|
|
8987
|
+
kind: "design-system",
|
|
8988
|
+
name: "Framer",
|
|
8989
|
+
description: "Website builder. Bold black and blue, motion-first, design-forward.",
|
|
8990
|
+
source: { path: "design-systems/framer" }
|
|
8991
|
+
},
|
|
8992
|
+
{
|
|
8993
|
+
id: "od:design-system:friendly",
|
|
8994
|
+
kind: "design-system",
|
|
8995
|
+
name: "Friendly",
|
|
8996
|
+
description: "Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.",
|
|
8997
|
+
source: { path: "design-systems/friendly" }
|
|
8998
|
+
},
|
|
8999
|
+
{
|
|
9000
|
+
id: "od:design-system:futuristic",
|
|
9001
|
+
kind: "design-system",
|
|
9002
|
+
name: "Futuristic",
|
|
9003
|
+
description: "Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.",
|
|
9004
|
+
source: { path: "design-systems/futuristic" }
|
|
9005
|
+
},
|
|
9006
|
+
{
|
|
9007
|
+
id: "od:design-system:github",
|
|
9008
|
+
kind: "design-system",
|
|
9009
|
+
name: "Github",
|
|
9010
|
+
description: "Code-forward platform. Functional density, blue-on-white precision, Primer foundations.",
|
|
9011
|
+
source: { path: "design-systems/github" }
|
|
9012
|
+
},
|
|
9013
|
+
{
|
|
9014
|
+
id: "od:design-system:glassmorphism",
|
|
9015
|
+
kind: "design-system",
|
|
9016
|
+
name: "Glassmorphism",
|
|
9017
|
+
description: "Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.",
|
|
9018
|
+
source: { path: "design-systems/glassmorphism" }
|
|
9019
|
+
},
|
|
9020
|
+
{
|
|
9021
|
+
id: "od:design-system:gradient",
|
|
9022
|
+
kind: "design-system",
|
|
9023
|
+
name: "Gradient",
|
|
9024
|
+
description: "Smooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth.",
|
|
9025
|
+
source: { path: "design-systems/gradient" }
|
|
9026
|
+
},
|
|
9027
|
+
{
|
|
9028
|
+
id: "od:design-system:hashicorp",
|
|
9029
|
+
kind: "design-system",
|
|
9030
|
+
name: "Hashicorp",
|
|
9031
|
+
description: "Infrastructure automation. Enterprise-clean, black and white.",
|
|
9032
|
+
source: { path: "design-systems/hashicorp" }
|
|
9033
|
+
},
|
|
9034
|
+
{
|
|
9035
|
+
id: "od:design-system:hud",
|
|
9036
|
+
kind: "design-system",
|
|
9037
|
+
name: "Hud",
|
|
9038
|
+
description: "Fighter jet / helicopter head-up display. Phosphor green on near-black, all-caps data overlays, angular geometry. Zero ambiguity at speed and altitude.",
|
|
9039
|
+
source: { path: "design-systems/hud" }
|
|
9040
|
+
},
|
|
9041
|
+
{
|
|
9042
|
+
id: "od:design-system:huggingface",
|
|
9043
|
+
kind: "design-system",
|
|
9044
|
+
name: "Huggingface",
|
|
9045
|
+
description: "ML community hub. Sunny yellow accent, monospace identity, cheerful and dense.",
|
|
9046
|
+
source: { path: "design-systems/huggingface" }
|
|
9047
|
+
},
|
|
9048
|
+
{
|
|
9049
|
+
id: "od:design-system:ibm",
|
|
9050
|
+
kind: "design-system",
|
|
9051
|
+
name: "Ibm",
|
|
9052
|
+
description: "Enterprise technology. Carbon design system, structured blue palette.",
|
|
9053
|
+
source: { path: "design-systems/ibm" }
|
|
9054
|
+
},
|
|
9055
|
+
{
|
|
9056
|
+
id: "od:design-system:intercom",
|
|
9057
|
+
kind: "design-system",
|
|
9058
|
+
name: "Intercom",
|
|
9059
|
+
description: "Customer messaging. Friendly blue palette, conversational UI patterns.",
|
|
9060
|
+
source: { path: "design-systems/intercom" }
|
|
9061
|
+
},
|
|
9062
|
+
{
|
|
9063
|
+
id: "od:design-system:kami",
|
|
9064
|
+
kind: "design-system",
|
|
9065
|
+
name: "Kami",
|
|
9066
|
+
description: "Editorial paper system: warm parchment canvas, ink-blue accent, serif-led hierarchy. Built for resumes, one-pagers, white papers, portfolios, slide decks \u2014 anything that should feel like high-quality print rather than UI. Multilingual by\u2026",
|
|
9067
|
+
source: { path: "design-systems/kami" }
|
|
9068
|
+
},
|
|
9069
|
+
{
|
|
9070
|
+
id: "od:design-system:kraken",
|
|
9071
|
+
kind: "design-system",
|
|
9072
|
+
name: "Kraken",
|
|
9073
|
+
description: "Crypto trading. Purple-accented dark UI, data-dense dashboards.",
|
|
9074
|
+
source: { path: "design-systems/kraken" }
|
|
9075
|
+
},
|
|
9076
|
+
{
|
|
9077
|
+
id: "od:design-system:lamborghini",
|
|
9078
|
+
kind: "design-system",
|
|
9079
|
+
name: "Lamborghini",
|
|
9080
|
+
description: "Supercar brand. True black surfaces, gold accents, dramatic uppercase typography.",
|
|
9081
|
+
source: { path: "design-systems/lamborghini" }
|
|
9082
|
+
},
|
|
9083
|
+
{
|
|
9084
|
+
id: "od:design-system:levels",
|
|
9085
|
+
kind: "design-system",
|
|
9086
|
+
name: "Levels",
|
|
9087
|
+
description: "Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed.",
|
|
9088
|
+
source: { path: "design-systems/levels" }
|
|
9089
|
+
},
|
|
9090
|
+
{
|
|
9091
|
+
id: "od:design-system:linear-app",
|
|
9092
|
+
kind: "design-system",
|
|
9093
|
+
name: "Linear App",
|
|
9094
|
+
description: "Project management. Ultra-minimal, precise, purple accent.",
|
|
9095
|
+
source: { path: "design-systems/linear-app" }
|
|
9096
|
+
},
|
|
9097
|
+
{
|
|
9098
|
+
id: "od:design-system:lingo",
|
|
9099
|
+
kind: "design-system",
|
|
9100
|
+
name: "Lingo",
|
|
9101
|
+
description: "Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.",
|
|
9102
|
+
source: { path: "design-systems/lingo" }
|
|
9103
|
+
},
|
|
9104
|
+
{
|
|
9105
|
+
id: "od:design-system:loom",
|
|
9106
|
+
kind: "design-system",
|
|
9107
|
+
name: "Loom",
|
|
9108
|
+
description: "Loom async video. Purple primary, friendly surfaces, video-first layout. Clean and professional without being corporate.",
|
|
9109
|
+
source: { path: "design-systems/loom" }
|
|
9110
|
+
},
|
|
9111
|
+
{
|
|
9112
|
+
id: "od:design-system:lovable",
|
|
9113
|
+
kind: "design-system",
|
|
9114
|
+
name: "Lovable",
|
|
9115
|
+
description: "AI full-stack builder. Playful gradients, friendly dev aesthetic.",
|
|
9116
|
+
source: { path: "design-systems/lovable" }
|
|
9117
|
+
},
|
|
9118
|
+
{
|
|
9119
|
+
id: "od:design-system:luxury",
|
|
9120
|
+
kind: "design-system",
|
|
9121
|
+
name: "Luxury",
|
|
9122
|
+
description: "High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for luxury brand experiences.",
|
|
9123
|
+
source: { path: "design-systems/luxury" }
|
|
9124
|
+
},
|
|
9125
|
+
{
|
|
9126
|
+
id: "od:design-system:mastercard",
|
|
9127
|
+
kind: "design-system",
|
|
9128
|
+
name: "Mastercard",
|
|
9129
|
+
description: "Global payments network. Warm cream canvas, orbital pill shapes, editorial warmth.",
|
|
9130
|
+
source: { path: "design-systems/mastercard" }
|
|
9131
|
+
},
|
|
9132
|
+
{
|
|
9133
|
+
id: "od:design-system:material",
|
|
9134
|
+
kind: "design-system",
|
|
9135
|
+
name: "Material",
|
|
9136
|
+
description: "Google's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns.",
|
|
9137
|
+
source: { path: "design-systems/material" }
|
|
9138
|
+
},
|
|
9139
|
+
{
|
|
9140
|
+
id: "od:design-system:meta",
|
|
9141
|
+
kind: "design-system",
|
|
9142
|
+
name: "Meta",
|
|
9143
|
+
description: "Tech retail store. Photography-first, binary light/dark surfaces, Meta Blue CTAs.",
|
|
9144
|
+
source: { path: "design-systems/meta" }
|
|
9145
|
+
},
|
|
9146
|
+
{
|
|
9147
|
+
id: "od:design-system:minimal",
|
|
9148
|
+
kind: "design-system",
|
|
9149
|
+
name: "Minimal",
|
|
9150
|
+
description: "Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.",
|
|
9151
|
+
source: { path: "design-systems/minimal" }
|
|
9152
|
+
},
|
|
9153
|
+
{
|
|
9154
|
+
id: "od:design-system:minimax",
|
|
9155
|
+
kind: "design-system",
|
|
9156
|
+
name: "Minimax",
|
|
9157
|
+
description: "AI model provider. Bold dark interface with neon accents.",
|
|
9158
|
+
source: { path: "design-systems/minimax" }
|
|
9159
|
+
},
|
|
9160
|
+
{
|
|
9161
|
+
id: "od:design-system:mintlify",
|
|
9162
|
+
kind: "design-system",
|
|
9163
|
+
name: "Mintlify",
|
|
9164
|
+
description: "Documentation platform. Clean, green-accented, reading-optimized.",
|
|
9165
|
+
source: { path: "design-systems/mintlify" }
|
|
9166
|
+
},
|
|
9167
|
+
{
|
|
9168
|
+
id: "od:design-system:miro",
|
|
9169
|
+
kind: "design-system",
|
|
9170
|
+
name: "Miro",
|
|
9171
|
+
description: "Visual collaboration. Bright yellow accent, infinite canvas aesthetic.",
|
|
9172
|
+
source: { path: "design-systems/miro" }
|
|
9173
|
+
},
|
|
9174
|
+
{
|
|
9175
|
+
id: "od:design-system:mission-control",
|
|
9176
|
+
kind: "design-system",
|
|
9177
|
+
name: "Mission Control",
|
|
9178
|
+
description: "Space/aerospace mission monitoring. Dark command center, amber telemetry, monospace precision. Functional clarity above all else.",
|
|
9179
|
+
source: { path: "design-systems/mission-control" }
|
|
9180
|
+
},
|
|
9181
|
+
{
|
|
9182
|
+
id: "od:design-system:mistral-ai",
|
|
9183
|
+
kind: "design-system",
|
|
9184
|
+
name: "Mistral AI",
|
|
9185
|
+
description: "Open-weight LLM provider. French-engineered minimalism, purple-toned.",
|
|
9186
|
+
source: { path: "design-systems/mistral-ai" }
|
|
9187
|
+
},
|
|
9188
|
+
{
|
|
9189
|
+
id: "od:design-system:modern",
|
|
9190
|
+
kind: "design-system",
|
|
9191
|
+
name: "Modern",
|
|
9192
|
+
description: "Contemporary editorial style with serif typography, minimal palettes, and clean layouts for polished digital products.",
|
|
9193
|
+
source: { path: "design-systems/modern" }
|
|
7895
9194
|
},
|
|
7896
9195
|
{
|
|
7897
|
-
id: "od:
|
|
7898
|
-
kind: "
|
|
7899
|
-
name: "
|
|
7900
|
-
description: "
|
|
7901
|
-
source:
|
|
7902
|
-
targets: ["presentation", "website", "mobile-app-design", "docs-design"],
|
|
7903
|
-
tags: ["design", "brief", "product", "brand", "requirements"],
|
|
7904
|
-
triggers: ["design brief", "brand", "product direction", "requirements"],
|
|
7905
|
-
bestFor: ["product design briefs", "brand-driven websites"],
|
|
7906
|
-
status: "curated",
|
|
7907
|
-
priority: 16
|
|
9196
|
+
id: "od:design-system:mongodb",
|
|
9197
|
+
kind: "design-system",
|
|
9198
|
+
name: "Mongodb",
|
|
9199
|
+
description: "Document database. Green leaf branding, developer documentation focus.",
|
|
9200
|
+
source: { path: "design-systems/mongodb" }
|
|
7908
9201
|
},
|
|
7909
|
-
...STYLE_OPEN_DESIGN_SKILL_SLUGS.map(createOpenDesignSkillEntry),
|
|
7910
9202
|
{
|
|
7911
|
-
id: "od:
|
|
7912
|
-
kind: "
|
|
7913
|
-
name: "
|
|
7914
|
-
description: "
|
|
7915
|
-
source:
|
|
7916
|
-
targets: ["website", "dashboard-design", "report"],
|
|
7917
|
-
tags: ["dashboard", "analytics", "kpi", "metrics", "operations", "table"],
|
|
7918
|
-
triggers: ["dashboard", "analytics", "monitoring", "metrics", "ops"],
|
|
7919
|
-
bestFor: ["metric-heavy pages", "status surfaces", "operational summaries"],
|
|
7920
|
-
compatibleWith: ["od:design-system:dashboard"],
|
|
7921
|
-
status: "curated",
|
|
7922
|
-
priority: 36
|
|
9203
|
+
id: "od:design-system:neobrutalism",
|
|
9204
|
+
kind: "design-system",
|
|
9205
|
+
name: "Neobrutalism",
|
|
9206
|
+
description: "Modern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces.",
|
|
9207
|
+
source: { path: "design-systems/neobrutalism" }
|
|
7923
9208
|
},
|
|
7924
9209
|
{
|
|
7925
|
-
id: "od:
|
|
7926
|
-
kind: "
|
|
7927
|
-
name: "
|
|
7928
|
-
description: "
|
|
7929
|
-
source:
|
|
7930
|
-
targets: ["presentation", "website", "report"],
|
|
7931
|
-
tags: ["report", "finance", "executive", "table", "analysis", "sources"],
|
|
7932
|
-
triggers: ["report", "brief", "analysis", "top 10", "finance"],
|
|
7933
|
-
bestFor: ["source-backed reports", "executive summaries", "ranked lists"],
|
|
7934
|
-
compatibleWith: ["od:design-system:dashboard"],
|
|
7935
|
-
status: "curated",
|
|
7936
|
-
priority: 34
|
|
9210
|
+
id: "od:design-system:neon",
|
|
9211
|
+
kind: "design-system",
|
|
9212
|
+
name: "Neon",
|
|
9213
|
+
description: "Electric neon glow effects with high-contrast color pairings for bold, attention-grabbing interfaces.",
|
|
9214
|
+
source: { path: "design-systems/neon" }
|
|
7937
9215
|
},
|
|
7938
9216
|
{
|
|
7939
|
-
id: "od:
|
|
7940
|
-
kind: "
|
|
7941
|
-
name: "
|
|
7942
|
-
description: "
|
|
7943
|
-
source:
|
|
7944
|
-
targets: ["website", "docs-design", "report"],
|
|
7945
|
-
tags: ["docs", "explanation", "guide", "structured", "reference"],
|
|
7946
|
-
triggers: ["docs", "documentation", "guide", "explain", "how to"],
|
|
7947
|
-
bestFor: ["technical explainers", "product docs", "implementation notes"],
|
|
7948
|
-
compatibleWith: ["od:skill:design-brief", "od:design-system:mono"],
|
|
7949
|
-
status: "curated",
|
|
7950
|
-
priority: 26
|
|
9217
|
+
id: "od:design-system:neumorphism",
|
|
9218
|
+
kind: "design-system",
|
|
9219
|
+
name: "Neumorphism",
|
|
9220
|
+
description: "Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.",
|
|
9221
|
+
source: { path: "design-systems/neumorphism" }
|
|
7951
9222
|
},
|
|
7952
9223
|
{
|
|
7953
|
-
id: "od:
|
|
7954
|
-
kind: "
|
|
7955
|
-
name: "
|
|
7956
|
-
description: "
|
|
7957
|
-
source:
|
|
7958
|
-
targets: ["mobile-app-design"],
|
|
7959
|
-
tags: ["mobile", "app", "ios", "design", "prototype", "phone"],
|
|
7960
|
-
triggers: [
|
|
7961
|
-
"mobile app",
|
|
7962
|
-
"ios app",
|
|
7963
|
-
"android app",
|
|
7964
|
-
"phone screen",
|
|
7965
|
-
"app ui",
|
|
7966
|
-
"app mockup"
|
|
7967
|
-
],
|
|
7968
|
-
bestFor: ["mobile UI mockups", "single-screen app design reviews"],
|
|
7969
|
-
compatibleWith: ["od:skill:design-brief", "od:design-system:apple"],
|
|
7970
|
-
status: "curated",
|
|
7971
|
-
priority: 38
|
|
9224
|
+
id: "od:design-system:nike",
|
|
9225
|
+
kind: "design-system",
|
|
9226
|
+
name: "Nike",
|
|
9227
|
+
description: "Athletic retail. Monochrome UI, massive uppercase type, full-bleed photography.",
|
|
9228
|
+
source: { path: "design-systems/nike" }
|
|
7972
9229
|
},
|
|
7973
9230
|
{
|
|
7974
|
-
id: "od:
|
|
7975
|
-
kind: "
|
|
7976
|
-
name: "
|
|
7977
|
-
description: "
|
|
7978
|
-
source:
|
|
7979
|
-
targets: ["presentation", "report"],
|
|
7980
|
-
tags: ["presentation", "dark", "graph", "data", "technical", "metrics"],
|
|
7981
|
-
triggers: ["deck", "presentation", "graph", "dark", "data story"],
|
|
7982
|
-
bestFor: ["data presentations", "technical executive briefings"],
|
|
7983
|
-
compatibleWith: ["od:design-system:trading-terminal"],
|
|
7984
|
-
status: "curated",
|
|
7985
|
-
priority: 32
|
|
9231
|
+
id: "od:design-system:notion",
|
|
9232
|
+
kind: "design-system",
|
|
9233
|
+
name: "Notion",
|
|
9234
|
+
description: "All-in-one workspace. Warm minimalism, serif headings, soft surfaces.",
|
|
9235
|
+
source: { path: "design-systems/notion" }
|
|
7986
9236
|
},
|
|
7987
9237
|
{
|
|
7988
|
-
id: "od:
|
|
7989
|
-
kind: "
|
|
7990
|
-
name: "
|
|
7991
|
-
description: "
|
|
7992
|
-
source:
|
|
7993
|
-
targets: ["presentation", "poster", "report"],
|
|
7994
|
-
tags: ["presentation", "retro", "zine", "editorial", "expressive"],
|
|
7995
|
-
triggers: ["retro", "zine", "editorial", "magazine", "bold"],
|
|
7996
|
-
bestFor: [
|
|
7997
|
-
"editorial decks",
|
|
7998
|
-
"culture reports",
|
|
7999
|
-
"visually distinctive summaries"
|
|
8000
|
-
],
|
|
8001
|
-
compatibleWith: [
|
|
8002
|
-
"od:skill:article-magazine",
|
|
8003
|
-
"od:design-system:warm-editorial"
|
|
8004
|
-
],
|
|
8005
|
-
status: "curated",
|
|
8006
|
-
priority: 30
|
|
9238
|
+
id: "od:design-system:nvidia",
|
|
9239
|
+
kind: "design-system",
|
|
9240
|
+
name: "Nvidia",
|
|
9241
|
+
description: "GPU computing. Green-black energy, technical power aesthetic.",
|
|
9242
|
+
source: { path: "design-systems/nvidia" }
|
|
8007
9243
|
},
|
|
8008
9244
|
{
|
|
8009
|
-
id: "od:
|
|
8010
|
-
kind: "
|
|
8011
|
-
name: "
|
|
8012
|
-
description: "
|
|
8013
|
-
source:
|
|
8014
|
-
targets: ["presentation", "report", "docs-design"],
|
|
8015
|
-
tags: ["update", "status", "briefing", "report", "metrics"],
|
|
8016
|
-
triggers: ["weekly", "status", "update", "briefing"],
|
|
8017
|
-
bestFor: ["team updates", "status reports", "progress summaries"],
|
|
8018
|
-
compatibleWith: ["od:design-system:dashboard"],
|
|
8019
|
-
status: "curated",
|
|
8020
|
-
priority: 24
|
|
9245
|
+
id: "od:design-system:ollama",
|
|
9246
|
+
kind: "design-system",
|
|
9247
|
+
name: "Ollama",
|
|
9248
|
+
description: "Run LLMs locally. Terminal-first, monochrome simplicity.",
|
|
9249
|
+
source: { path: "design-systems/ollama" }
|
|
8021
9250
|
},
|
|
8022
9251
|
{
|
|
8023
|
-
id: "od:
|
|
8024
|
-
kind: "
|
|
8025
|
-
name: "
|
|
8026
|
-
description: "
|
|
8027
|
-
source:
|
|
8028
|
-
targets: ["website", "poster"],
|
|
8029
|
-
tags: ["website", "editorial", "brand", "visual", "prototype"],
|
|
8030
|
-
triggers: ["landing", "site", "brand", "editorial", "launch"],
|
|
8031
|
-
bestFor: ["brand websites", "launch pages", "editorial product pages"],
|
|
8032
|
-
compatibleWith: ["od:skill:article-magazine", "od:design-system:editorial"],
|
|
8033
|
-
status: "curated",
|
|
8034
|
-
priority: 30
|
|
9252
|
+
id: "od:design-system:openai",
|
|
9253
|
+
kind: "design-system",
|
|
9254
|
+
name: "Openai",
|
|
9255
|
+
description: "Calm, near-monochrome system anchored in deep teal-black with generous white space and editorial typography.",
|
|
9256
|
+
source: { path: "design-systems/openai" }
|
|
8035
9257
|
},
|
|
8036
|
-
...Object.entries(ADDITIONAL_OPEN_DESIGN_TEMPLATE_DESCRIPTIONS).map(
|
|
8037
|
-
([slug, description]) => {
|
|
8038
|
-
return createOpenDesignTemplateEntry(slug, description);
|
|
8039
|
-
}
|
|
8040
|
-
),
|
|
8041
9258
|
{
|
|
8042
|
-
id: "od:design-system:
|
|
9259
|
+
id: "od:design-system:opencode-ai",
|
|
8043
9260
|
kind: "design-system",
|
|
8044
|
-
name: "
|
|
8045
|
-
description: "
|
|
8046
|
-
source:
|
|
8047
|
-
targets: ["website", "dashboard-design", "report"],
|
|
8048
|
-
tags: ["dashboard", "neutral", "dense", "table", "operations", "charts"],
|
|
8049
|
-
triggers: ["dashboard", "analytics", "metrics", "ops", "report"],
|
|
8050
|
-
bestFor: ["operational UIs", "data reports", "admin surfaces"],
|
|
8051
|
-
status: "curated",
|
|
8052
|
-
priority: 36
|
|
9261
|
+
name: "Opencode AI",
|
|
9262
|
+
description: "AI coding platform. Developer-centric dark theme.",
|
|
9263
|
+
source: { path: "design-systems/opencode-ai" }
|
|
8053
9264
|
},
|
|
8054
9265
|
{
|
|
8055
|
-
id: "od:design-system:
|
|
9266
|
+
id: "od:design-system:pacman",
|
|
8056
9267
|
kind: "design-system",
|
|
8057
|
-
name: "
|
|
8058
|
-
description: "
|
|
8059
|
-
source:
|
|
8060
|
-
targets: ["presentation", "website", "dashboard-design", "report"],
|
|
8061
|
-
tags: ["dark", "terminal", "finance", "data", "charts", "dense"],
|
|
8062
|
-
triggers: ["dark", "terminal", "trading", "chart", "graph"],
|
|
8063
|
-
bestFor: ["dark analytical reports", "graph-heavy dashboards"],
|
|
8064
|
-
status: "curated",
|
|
8065
|
-
priority: 32
|
|
9268
|
+
name: "Pacman",
|
|
9269
|
+
description: "Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.",
|
|
9270
|
+
source: { path: "design-systems/pacman" }
|
|
8066
9271
|
},
|
|
8067
9272
|
{
|
|
8068
|
-
id: "od:design-system:
|
|
9273
|
+
id: "od:design-system:paper",
|
|
8069
9274
|
kind: "design-system",
|
|
8070
|
-
name: "
|
|
8071
|
-
description: "
|
|
8072
|
-
source:
|
|
8073
|
-
targets: ["presentation", "website", "poster", "report", "docs-design"],
|
|
8074
|
-
tags: ["warm", "editorial", "magazine", "narrative", "readable"],
|
|
8075
|
-
triggers: ["editorial", "magazine", "zine", "warm", "story"],
|
|
8076
|
-
bestFor: ["narrative reports", "editorial decks", "long-form pages"],
|
|
8077
|
-
status: "curated",
|
|
8078
|
-
priority: 30
|
|
9275
|
+
name: "Paper",
|
|
9276
|
+
description: "Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.",
|
|
9277
|
+
source: { path: "design-systems/paper" }
|
|
8079
9278
|
},
|
|
8080
9279
|
{
|
|
8081
|
-
id: "od:design-system:
|
|
9280
|
+
id: "od:design-system:perplexity",
|
|
8082
9281
|
kind: "design-system",
|
|
8083
|
-
name: "
|
|
8084
|
-
description: "
|
|
8085
|
-
source:
|
|
8086
|
-
targets: ["presentation", "website", "poster", "report", "docs-design"],
|
|
8087
|
-
tags: ["editorial", "typography", "media", "brand", "article"],
|
|
8088
|
-
triggers: ["editorial", "article", "brand", "landing", "magazine"],
|
|
8089
|
-
bestFor: ["brand sites", "article-style reports", "visual narratives"],
|
|
8090
|
-
status: "curated",
|
|
8091
|
-
priority: 28
|
|
9282
|
+
name: "Perplexity",
|
|
9283
|
+
description: "Conversational AI search engine. Deep-dark canvas, sharp typography, single violet accent, dense information hierarchy.",
|
|
9284
|
+
source: { path: "design-systems/perplexity" }
|
|
8092
9285
|
},
|
|
8093
9286
|
{
|
|
8094
|
-
id: "od:design-system:
|
|
9287
|
+
id: "od:design-system:perspective",
|
|
8095
9288
|
kind: "design-system",
|
|
8096
|
-
name: "
|
|
8097
|
-
description: "
|
|
8098
|
-
source:
|
|
8099
|
-
targets: ["website", "docs-design", "report"],
|
|
8100
|
-
tags: ["mono", "docs", "technical", "minimal", "structured"],
|
|
8101
|
-
triggers: ["docs", "technical", "reference", "minimal", "api"],
|
|
8102
|
-
bestFor: ["technical documentation", "implementation reports"],
|
|
8103
|
-
status: "curated",
|
|
8104
|
-
priority: 20
|
|
9289
|
+
name: "Perspective",
|
|
9290
|
+
description: "Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.",
|
|
9291
|
+
source: { path: "design-systems/perspective" }
|
|
8105
9292
|
},
|
|
8106
9293
|
{
|
|
8107
|
-
id: "od:design-system:
|
|
9294
|
+
id: "od:design-system:pinterest",
|
|
8108
9295
|
kind: "design-system",
|
|
8109
|
-
name: "
|
|
8110
|
-
description: "
|
|
8111
|
-
source:
|
|
8112
|
-
|
|
8113
|
-
|
|
8114
|
-
|
|
8115
|
-
|
|
8116
|
-
|
|
8117
|
-
|
|
9296
|
+
name: "Pinterest",
|
|
9297
|
+
description: "Visual discovery. Red accent, masonry grid, image-first.",
|
|
9298
|
+
source: { path: "design-systems/pinterest" }
|
|
9299
|
+
},
|
|
9300
|
+
{
|
|
9301
|
+
id: "od:design-system:playstation",
|
|
9302
|
+
kind: "design-system",
|
|
9303
|
+
name: "Playstation",
|
|
9304
|
+
description: "Gaming console retail. Three-surface channel layout, quiet-authority display type, cyan hover-scale.",
|
|
9305
|
+
source: { path: "design-systems/playstation" }
|
|
9306
|
+
},
|
|
9307
|
+
{
|
|
9308
|
+
id: "od:design-system:posthog",
|
|
9309
|
+
kind: "design-system",
|
|
9310
|
+
name: "Posthog",
|
|
9311
|
+
description: "Product analytics. Playful hedgehog branding, developer-friendly dark UI.",
|
|
9312
|
+
source: { path: "design-systems/posthog" }
|
|
9313
|
+
},
|
|
9314
|
+
{
|
|
9315
|
+
id: "od:design-system:premium",
|
|
9316
|
+
kind: "design-system",
|
|
9317
|
+
name: "Premium",
|
|
9318
|
+
description: "Apple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language.",
|
|
9319
|
+
source: { path: "design-systems/premium" }
|
|
9320
|
+
},
|
|
9321
|
+
{
|
|
9322
|
+
id: "od:design-system:professional",
|
|
9323
|
+
kind: "design-system",
|
|
9324
|
+
name: "Professional",
|
|
9325
|
+
description: "Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.",
|
|
9326
|
+
source: { path: "design-systems/professional" }
|
|
9327
|
+
},
|
|
9328
|
+
{
|
|
9329
|
+
id: "od:design-system:publication",
|
|
9330
|
+
kind: "design-system",
|
|
9331
|
+
name: "Publication",
|
|
9332
|
+
description: "Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.",
|
|
9333
|
+
source: { path: "design-systems/publication" }
|
|
9334
|
+
},
|
|
9335
|
+
{
|
|
9336
|
+
id: "od:design-system:raycast",
|
|
9337
|
+
kind: "design-system",
|
|
9338
|
+
name: "Raycast",
|
|
9339
|
+
description: "Productivity launcher. Sleek dark chrome, vibrant gradient accents.",
|
|
9340
|
+
source: { path: "design-systems/raycast" }
|
|
9341
|
+
},
|
|
9342
|
+
{
|
|
9343
|
+
id: "od:design-system:refined",
|
|
9344
|
+
kind: "design-system",
|
|
9345
|
+
name: "Refined",
|
|
9346
|
+
description: "Carefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes.",
|
|
9347
|
+
source: { path: "design-systems/refined" }
|
|
9348
|
+
},
|
|
9349
|
+
{
|
|
9350
|
+
id: "od:design-system:renault",
|
|
9351
|
+
kind: "design-system",
|
|
9352
|
+
name: "Renault",
|
|
9353
|
+
description: "French automotive. Vibrant aurora gradients, NouvelR typography, bold energy.",
|
|
9354
|
+
source: { path: "design-systems/renault" }
|
|
9355
|
+
},
|
|
9356
|
+
{
|
|
9357
|
+
id: "od:design-system:replicate",
|
|
9358
|
+
kind: "design-system",
|
|
9359
|
+
name: "Replicate",
|
|
9360
|
+
description: "Run ML models via API. Clean white canvas, code-forward.",
|
|
9361
|
+
source: { path: "design-systems/replicate" }
|
|
9362
|
+
},
|
|
9363
|
+
{
|
|
9364
|
+
id: "od:design-system:resend",
|
|
9365
|
+
kind: "design-system",
|
|
9366
|
+
name: "Resend",
|
|
9367
|
+
description: "Email API. Minimal dark theme, monospace accents.",
|
|
9368
|
+
source: { path: "design-systems/resend" }
|
|
9369
|
+
},
|
|
9370
|
+
{
|
|
9371
|
+
id: "od:design-system:retro",
|
|
9372
|
+
kind: "design-system",
|
|
9373
|
+
name: "Retro",
|
|
9374
|
+
description: "Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.",
|
|
9375
|
+
source: { path: "design-systems/retro" }
|
|
9376
|
+
},
|
|
9377
|
+
{
|
|
9378
|
+
id: "od:design-system:revolut",
|
|
9379
|
+
kind: "design-system",
|
|
9380
|
+
name: "Revolut",
|
|
9381
|
+
description: "Digital banking. Sleek dark interface, gradient cards, fintech precision.",
|
|
9382
|
+
source: { path: "design-systems/revolut" }
|
|
9383
|
+
},
|
|
9384
|
+
{
|
|
9385
|
+
id: "od:design-system:runwayml",
|
|
9386
|
+
kind: "design-system",
|
|
9387
|
+
name: "Runwayml",
|
|
9388
|
+
description: "AI video generation. Cinematic dark UI, media-rich layout.",
|
|
9389
|
+
source: { path: "design-systems/runwayml" }
|
|
9390
|
+
},
|
|
9391
|
+
{
|
|
9392
|
+
id: "od:design-system:sanity",
|
|
9393
|
+
kind: "design-system",
|
|
9394
|
+
name: "Sanity",
|
|
9395
|
+
description: "Headless CMS. Red accent, content-first editorial layout.",
|
|
9396
|
+
source: { path: "design-systems/sanity" }
|
|
9397
|
+
},
|
|
9398
|
+
{
|
|
9399
|
+
id: "od:design-system:sentry",
|
|
9400
|
+
kind: "design-system",
|
|
9401
|
+
name: "Sentry",
|
|
9402
|
+
description: "Error monitoring. Dark dashboard, data-dense, pink-purple accent.",
|
|
9403
|
+
source: { path: "design-systems/sentry" }
|
|
9404
|
+
},
|
|
9405
|
+
{
|
|
9406
|
+
id: "od:design-system:shadcn",
|
|
9407
|
+
kind: "design-system",
|
|
9408
|
+
name: "Shadcn",
|
|
9409
|
+
description: "Shadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns.",
|
|
9410
|
+
source: { path: "design-systems/shadcn" }
|
|
9411
|
+
},
|
|
9412
|
+
{
|
|
9413
|
+
id: "od:design-system:shopify",
|
|
9414
|
+
kind: "design-system",
|
|
9415
|
+
name: "Shopify",
|
|
9416
|
+
description: "E-commerce platform. Dark-first cinematic, neon green accent, ultra-light type.",
|
|
9417
|
+
source: { path: "design-systems/shopify" }
|
|
9418
|
+
},
|
|
9419
|
+
{
|
|
9420
|
+
id: "od:design-system:simple",
|
|
9421
|
+
kind: "design-system",
|
|
9422
|
+
name: "Simple",
|
|
9423
|
+
description: "Straightforward, no-frills design with clean typography, neutral colors, and intuitive layouts that stay out of the way.",
|
|
9424
|
+
source: { path: "design-systems/simple" }
|
|
9425
|
+
},
|
|
9426
|
+
{
|
|
9427
|
+
id: "od:design-system:skeumorphism",
|
|
9428
|
+
kind: "design-system",
|
|
9429
|
+
name: "Skeumorphism",
|
|
9430
|
+
description: "Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces.",
|
|
9431
|
+
source: { path: "design-systems/skeumorphism" }
|
|
9432
|
+
},
|
|
9433
|
+
{
|
|
9434
|
+
id: "od:design-system:slack",
|
|
9435
|
+
kind: "design-system",
|
|
9436
|
+
name: "Slack",
|
|
9437
|
+
description: "Workplace communication platform. Aubergine-primary, multi-accent logo palette, light surfaces with dark sidebar, warm and approachable.",
|
|
9438
|
+
source: { path: "design-systems/slack" }
|
|
9439
|
+
},
|
|
9440
|
+
{
|
|
9441
|
+
id: "od:design-system:sleek",
|
|
9442
|
+
kind: "design-system",
|
|
9443
|
+
name: "Sleek",
|
|
9444
|
+
description: "Modern minimalist aesthetic with clean lines, intentional color palette, subtle interactions, and consistent spacing.",
|
|
9445
|
+
source: { path: "design-systems/sleek" }
|
|
9446
|
+
},
|
|
9447
|
+
{
|
|
9448
|
+
id: "od:design-system:spacex",
|
|
9449
|
+
kind: "design-system",
|
|
9450
|
+
name: "Spacex",
|
|
9451
|
+
description: "Space technology. Stark black and white, full-bleed imagery, futuristic.",
|
|
9452
|
+
source: { path: "design-systems/spacex" }
|
|
9453
|
+
},
|
|
9454
|
+
{
|
|
9455
|
+
id: "od:design-system:spacious",
|
|
9456
|
+
kind: "design-system",
|
|
9457
|
+
name: "Spacious",
|
|
9458
|
+
description: "Generous whitespace, consistent padding, and grid-based layouts for clean, readable, and breathing interfaces.",
|
|
9459
|
+
source: { path: "design-systems/spacious" }
|
|
9460
|
+
},
|
|
9461
|
+
{
|
|
9462
|
+
id: "od:design-system:spotify",
|
|
9463
|
+
kind: "design-system",
|
|
9464
|
+
name: "Spotify",
|
|
9465
|
+
description: "Music streaming. Vibrant green on dark, bold type, album-art-driven.",
|
|
9466
|
+
source: { path: "design-systems/spotify" }
|
|
9467
|
+
},
|
|
9468
|
+
{
|
|
9469
|
+
id: "od:design-system:starbucks",
|
|
9470
|
+
kind: "design-system",
|
|
9471
|
+
name: "Starbucks",
|
|
9472
|
+
description: "Global coffee retail brand. Four-tier green system, warm cream canvas, full-pill buttons.",
|
|
9473
|
+
source: { path: "design-systems/starbucks" }
|
|
9474
|
+
},
|
|
9475
|
+
{
|
|
9476
|
+
id: "od:design-system:storytelling",
|
|
9477
|
+
kind: "design-system",
|
|
9478
|
+
name: "Storytelling",
|
|
9479
|
+
description: "Narrative-driven design using visuals, copy, and interaction to guide users through engaging, emotionally resonant journeys.",
|
|
9480
|
+
source: { path: "design-systems/storytelling" }
|
|
9481
|
+
},
|
|
9482
|
+
{
|
|
9483
|
+
id: "od:design-system:stripe",
|
|
9484
|
+
kind: "design-system",
|
|
9485
|
+
name: "Stripe",
|
|
9486
|
+
description: "Payment infrastructure. Signature purple gradients, weight-300 elegance.",
|
|
9487
|
+
source: { path: "design-systems/stripe" }
|
|
9488
|
+
},
|
|
9489
|
+
{
|
|
9490
|
+
id: "od:design-system:supabase",
|
|
9491
|
+
kind: "design-system",
|
|
9492
|
+
name: "Supabase",
|
|
9493
|
+
description: "Open-source Firebase alternative. Dark emerald theme, code-first.",
|
|
9494
|
+
source: { path: "design-systems/supabase" }
|
|
9495
|
+
},
|
|
9496
|
+
{
|
|
9497
|
+
id: "od:design-system:superhuman",
|
|
9498
|
+
kind: "design-system",
|
|
9499
|
+
name: "Superhuman",
|
|
9500
|
+
description: "Fast email client. Premium dark UI, keyboard-first, purple glow.",
|
|
9501
|
+
source: { path: "design-systems/superhuman" }
|
|
9502
|
+
},
|
|
9503
|
+
{
|
|
9504
|
+
id: "od:design-system:tesla",
|
|
9505
|
+
kind: "design-system",
|
|
9506
|
+
name: "Tesla",
|
|
9507
|
+
description: "Electric automotive. Radical subtraction, full-viewport photography, near-zero UI.",
|
|
9508
|
+
source: { path: "design-systems/tesla" }
|
|
9509
|
+
},
|
|
9510
|
+
{
|
|
9511
|
+
id: "od:design-system:tetris",
|
|
9512
|
+
kind: "design-system",
|
|
9513
|
+
name: "Tetris",
|
|
9514
|
+
description: "Classic block-game inspired design with playful colors, bold display fonts, and compact, high-energy layouts.",
|
|
9515
|
+
source: { path: "design-systems/tetris" }
|
|
9516
|
+
},
|
|
9517
|
+
{
|
|
9518
|
+
id: "od:design-system:theverge",
|
|
9519
|
+
kind: "design-system",
|
|
9520
|
+
name: "Theverge",
|
|
9521
|
+
description: "Tech editorial media. Acid-mint and ultraviolet accents, Manuka display, rave-flyer story tiles.",
|
|
9522
|
+
source: { path: "design-systems/theverge" }
|
|
9523
|
+
},
|
|
9524
|
+
{
|
|
9525
|
+
id: "od:design-system:together-ai",
|
|
9526
|
+
kind: "design-system",
|
|
9527
|
+
name: "Together AI",
|
|
9528
|
+
description: "Open-source AI infrastructure. Technical, blueprint-style design.",
|
|
9529
|
+
source: { path: "design-systems/together-ai" }
|
|
9530
|
+
},
|
|
9531
|
+
{
|
|
9532
|
+
id: "od:design-system:totality-festival",
|
|
9533
|
+
kind: "design-system",
|
|
9534
|
+
name: "Totality Festival",
|
|
9535
|
+
description: 'A cosmic-premium, glassmorphic dark system that captures the visceral awe of a solar eclipse \u2014 obsidian surfaces, amber "corona" highlights, and cyan atmospheric accents.',
|
|
9536
|
+
source: { path: "design-systems/totality-festival" }
|
|
9537
|
+
},
|
|
9538
|
+
{
|
|
9539
|
+
id: "od:design-system:uber",
|
|
9540
|
+
kind: "design-system",
|
|
9541
|
+
name: "Uber",
|
|
9542
|
+
description: "Mobility platform. Bold black and white, tight type, urban energy.",
|
|
9543
|
+
source: { path: "design-systems/uber" }
|
|
9544
|
+
},
|
|
9545
|
+
{
|
|
9546
|
+
id: "od:design-system:urdu",
|
|
9547
|
+
kind: "design-system",
|
|
9548
|
+
name: "Urdu",
|
|
9549
|
+
description: "Urdu-first digital experiences with native RTL support,Nastaliq typography, and bilingual harmony.",
|
|
9550
|
+
source: { path: "design-systems/urdu" }
|
|
9551
|
+
},
|
|
9552
|
+
{
|
|
9553
|
+
id: "od:design-system:vercel",
|
|
9554
|
+
kind: "design-system",
|
|
9555
|
+
name: "Vercel",
|
|
9556
|
+
description: "Frontend deployment. Black and white precision, Geist font.",
|
|
9557
|
+
source: { path: "design-systems/vercel" }
|
|
9558
|
+
},
|
|
9559
|
+
{
|
|
9560
|
+
id: "od:design-system:vibrant",
|
|
9561
|
+
kind: "design-system",
|
|
9562
|
+
name: "Vibrant",
|
|
9563
|
+
description: "Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.",
|
|
9564
|
+
source: { path: "design-systems/vibrant" }
|
|
9565
|
+
},
|
|
9566
|
+
{
|
|
9567
|
+
id: "od:design-system:vintage",
|
|
9568
|
+
kind: "design-system",
|
|
9569
|
+
name: "Vintage",
|
|
9570
|
+
description: "1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.",
|
|
9571
|
+
source: { path: "design-systems/vintage" }
|
|
9572
|
+
},
|
|
9573
|
+
{
|
|
9574
|
+
id: "od:design-system:vodafone",
|
|
9575
|
+
kind: "design-system",
|
|
9576
|
+
name: "Vodafone",
|
|
9577
|
+
description: "Global telecom brand. Monumental uppercase display, Vodafone Red chapter bands.",
|
|
9578
|
+
source: { path: "design-systems/vodafone" }
|
|
9579
|
+
},
|
|
9580
|
+
{
|
|
9581
|
+
id: "od:design-system:voltagent",
|
|
9582
|
+
kind: "design-system",
|
|
9583
|
+
name: "Voltagent",
|
|
9584
|
+
description: "AI agent framework. Void-black canvas, emerald accent, terminal-native.",
|
|
9585
|
+
source: { path: "design-systems/voltagent" }
|
|
9586
|
+
},
|
|
9587
|
+
{
|
|
9588
|
+
id: "od:design-system:warp",
|
|
9589
|
+
kind: "design-system",
|
|
9590
|
+
name: "Warp",
|
|
9591
|
+
description: "Modern terminal. Dark IDE-like interface, block-based command UI.",
|
|
9592
|
+
source: { path: "design-systems/warp" }
|
|
9593
|
+
},
|
|
9594
|
+
{
|
|
9595
|
+
id: "od:design-system:webex",
|
|
9596
|
+
kind: "design-system",
|
|
9597
|
+
name: "Webex",
|
|
9598
|
+
description: "Collaboration platform. Momentum typography, blue action system, multi-user accent spectrum.",
|
|
9599
|
+
source: { path: "design-systems/webex" }
|
|
9600
|
+
},
|
|
9601
|
+
{
|
|
9602
|
+
id: "od:design-system:webflow",
|
|
9603
|
+
kind: "design-system",
|
|
9604
|
+
name: "Webflow",
|
|
9605
|
+
description: "Visual web builder. Blue-accented, polished marketing site aesthetic.",
|
|
9606
|
+
source: { path: "design-systems/webflow" }
|
|
9607
|
+
},
|
|
9608
|
+
{
|
|
9609
|
+
id: "od:design-system:wechat",
|
|
9610
|
+
kind: "design-system",
|
|
9611
|
+
name: "Wechat",
|
|
9612
|
+
description: "Brand visual language for WeChat Mini Programs, official accounts, and open ecosystem extensions.",
|
|
9613
|
+
source: { path: "design-systems/wechat" }
|
|
9614
|
+
},
|
|
9615
|
+
{
|
|
9616
|
+
id: "od:design-system:wired",
|
|
9617
|
+
kind: "design-system",
|
|
9618
|
+
name: "Wired",
|
|
9619
|
+
description: "Tech magazine. Paper-white broadsheet density, custom serif display, mono kickers, ink-blue links.",
|
|
9620
|
+
source: { path: "design-systems/wired" }
|
|
9621
|
+
},
|
|
9622
|
+
{
|
|
9623
|
+
id: "od:design-system:wise",
|
|
9624
|
+
kind: "design-system",
|
|
9625
|
+
name: "Wise",
|
|
9626
|
+
description: "Money transfer. Bright green accent, friendly and clear.",
|
|
9627
|
+
source: { path: "design-systems/wise" }
|
|
9628
|
+
},
|
|
9629
|
+
{
|
|
9630
|
+
id: "od:design-system:x-ai",
|
|
9631
|
+
kind: "design-system",
|
|
9632
|
+
name: "X AI",
|
|
9633
|
+
description: "Elon Musk's AI lab. Stark monochrome, futuristic minimalism.",
|
|
9634
|
+
source: { path: "design-systems/x-ai" }
|
|
9635
|
+
},
|
|
9636
|
+
{
|
|
9637
|
+
id: "od:design-system:xiaohongshu",
|
|
9638
|
+
kind: "design-system",
|
|
9639
|
+
name: "Xiaohongshu",
|
|
9640
|
+
description: "Lifestyle UGC social platform. Singular brand red, generous radius, content-first.",
|
|
9641
|
+
source: { path: "design-systems/xiaohongshu" }
|
|
9642
|
+
},
|
|
9643
|
+
{
|
|
9644
|
+
id: "od:design-system:zapier",
|
|
9645
|
+
kind: "design-system",
|
|
9646
|
+
name: "Zapier",
|
|
9647
|
+
description: "Automation platform. Warm orange, friendly illustration-driven.",
|
|
9648
|
+
source: { path: "design-systems/zapier" }
|
|
8118
9649
|
},
|
|
8119
|
-
...Object.entries(ADDITIONAL_OPEN_DESIGN_DESIGN_SYSTEM_DESCRIPTIONS).map(
|
|
8120
|
-
([slug, description]) => {
|
|
8121
|
-
return createOpenDesignDesignSystemEntry(slug, description);
|
|
8122
|
-
}
|
|
8123
|
-
),
|
|
8124
9650
|
{
|
|
8125
9651
|
id: "vm0:image-style:notion-illustration",
|
|
8126
9652
|
kind: "image-style",
|
|
8127
9653
|
name: "Notion Illustration",
|
|
8128
9654
|
description: "Zero-native illustration style for hand-drawn product spot illustrations with simple ink contours and soft backgrounds.",
|
|
8129
9655
|
desc: 'Notion-editorial-style hand-drawn spot illustration. Black brush-pen ink on white, tapered confident strokes, solid-black curly hair, solid-black pants/shoes, 3/4 face turned toward viewer with closed-eye smile and soft nose hint, open breathing body outlines, and 1-3 supporting scene props + ambient marks that frame the moment. Trigger when user says /notion-illustration, asks for a "Notion-style illustration", "Notion spot illustration", or a new piece in this hand-drawn brush-pen Notion editorial style.',
|
|
8130
|
-
source:
|
|
8131
|
-
VM0_SKILLS_REPO,
|
|
8132
|
-
VM0_SKILLS_REF,
|
|
8133
|
-
"illustration-template/notion-illustration"
|
|
8134
|
-
),
|
|
8135
|
-
targets: ["image", "website", "poster", "presentation", "report"],
|
|
8136
|
-
tags: ["image", "illustration", "notion", "spot", "hand-drawn", "product"],
|
|
8137
|
-
triggers: [
|
|
8138
|
-
"illustration",
|
|
8139
|
-
"notion illustration",
|
|
8140
|
-
"spot illustration",
|
|
8141
|
-
"hand drawn",
|
|
8142
|
-
"product illustration"
|
|
8143
|
-
],
|
|
8144
|
-
bestFor: [
|
|
8145
|
-
"in-app empty states",
|
|
8146
|
-
"gallery previews",
|
|
8147
|
-
"product narrative artwork"
|
|
8148
|
-
],
|
|
8149
|
-
outputKinds: ["image"],
|
|
8150
|
-
primaryOutputKind: "image",
|
|
8151
|
-
executorHints: ["skill-authored", "built-in-image"],
|
|
8152
|
-
previewHint: "image",
|
|
8153
|
-
remixHint: "prompt-with-resource-hints",
|
|
8154
|
-
status: "experimental",
|
|
8155
|
-
priority: 18
|
|
9656
|
+
source: { path: "illustration-template/notion-illustration" }
|
|
8156
9657
|
},
|
|
8157
9658
|
{
|
|
8158
9659
|
id: "vm0:image-style:vm0-illustration",
|
|
@@ -8160,47 +9661,17 @@ var OPEN_DESIGN_REGISTRY = [
|
|
|
8160
9661
|
name: "vm0 Illustration",
|
|
8161
9662
|
description: "vm0 in-app spot illustration style with bold hand-drawn ink line art, white-filled interiors, and a soft rounded color backdrop.",
|
|
8162
9663
|
desc: "Generate vm0-style vm0 in-app spot illustrations: bold hand-drawn ink line art with white-filled interiors, a soft rounded color backdrop, transparent output, and simple iconic metaphors for product states.",
|
|
8163
|
-
source:
|
|
8164
|
-
VM0_SKILLS_REPO,
|
|
8165
|
-
VM0_SKILLS_REF,
|
|
8166
|
-
"illustration-template/vm0-illustration"
|
|
8167
|
-
),
|
|
8168
|
-
targets: ["image", "website", "poster", "presentation", "report"],
|
|
8169
|
-
tags: [
|
|
8170
|
-
"image",
|
|
8171
|
-
"illustration",
|
|
8172
|
-
"spot",
|
|
8173
|
-
"in-app",
|
|
8174
|
-
"empty-state",
|
|
8175
|
-
"hand-drawn",
|
|
8176
|
-
"vm0"
|
|
8177
|
-
],
|
|
8178
|
-
triggers: [
|
|
8179
|
-
"vm0 style",
|
|
8180
|
-
"in-app illustration",
|
|
8181
|
-
"empty state illustration",
|
|
8182
|
-
"vm0 illustration",
|
|
8183
|
-
"soft rounded color backdrop"
|
|
8184
|
-
],
|
|
8185
|
-
bestFor: [
|
|
8186
|
-
"in-app empty states",
|
|
8187
|
-
"billing and permission illustrations",
|
|
8188
|
-
"small product state artwork"
|
|
8189
|
-
],
|
|
8190
|
-
outputKinds: ["image"],
|
|
8191
|
-
primaryOutputKind: "image",
|
|
8192
|
-
executorHints: ["skill-authored", "built-in-image"],
|
|
8193
|
-
previewHint: "image",
|
|
8194
|
-
remixHint: "prompt-with-resource-hints",
|
|
8195
|
-
status: "experimental",
|
|
8196
|
-
priority: 19
|
|
9664
|
+
source: { path: "illustration-template/vm0-illustration" }
|
|
8197
9665
|
}
|
|
8198
9666
|
];
|
|
8199
|
-
function
|
|
9667
|
+
function filterByKind(kind) {
|
|
8200
9668
|
return OPEN_DESIGN_REGISTRY.filter((entry) => {
|
|
8201
|
-
return entry.kind ===
|
|
9669
|
+
return entry.kind === kind;
|
|
8202
9670
|
});
|
|
8203
9671
|
}
|
|
9672
|
+
function listImageStyles() {
|
|
9673
|
+
return filterByKind("image-style");
|
|
9674
|
+
}
|
|
8204
9675
|
function findImageStyle(id) {
|
|
8205
9676
|
return listImageStyles().find((entry) => {
|
|
8206
9677
|
return entry.id === id;
|
|
@@ -8218,57 +9689,7 @@ function toOpenDesignTarget(value) {
|
|
|
8218
9689
|
}
|
|
8219
9690
|
return value;
|
|
8220
9691
|
}
|
|
8221
|
-
function
|
|
8222
|
-
return value.toLowerCase();
|
|
8223
|
-
}
|
|
8224
|
-
function tokenize(value) {
|
|
8225
|
-
return normalizeText(value).split(/[^a-z0-9]+/u).filter((token) => {
|
|
8226
|
-
return token.length >= 2;
|
|
8227
|
-
});
|
|
8228
|
-
}
|
|
8229
|
-
function phraseScore(values, prompt, weight) {
|
|
8230
|
-
if (!values) {
|
|
8231
|
-
return 0;
|
|
8232
|
-
}
|
|
8233
|
-
return values.reduce((score, value) => {
|
|
8234
|
-
return prompt.includes(normalizeText(value)) ? score + weight : score;
|
|
8235
|
-
}, 0);
|
|
8236
|
-
}
|
|
8237
|
-
function tokenScore(values, promptTokens, weight) {
|
|
8238
|
-
if (!values) {
|
|
8239
|
-
return 0;
|
|
8240
|
-
}
|
|
8241
|
-
return values.reduce((score, value) => {
|
|
8242
|
-
const matches = tokenize(value).filter((token) => {
|
|
8243
|
-
return promptTokens.has(token);
|
|
8244
|
-
});
|
|
8245
|
-
return score + matches.length * weight;
|
|
8246
|
-
}, 0);
|
|
8247
|
-
}
|
|
8248
|
-
function scoreEntry(entry, target, prompt) {
|
|
8249
|
-
const normalizedPrompt = normalizeText(prompt);
|
|
8250
|
-
const promptTokens = new Set(tokenize(prompt));
|
|
8251
|
-
const targetScore = entry.targets.includes(target) ? 100 : 0;
|
|
8252
|
-
return targetScore + (entry.priority ?? 0) + phraseScore(entry.triggers, normalizedPrompt, 40) + phraseScore(entry.bestFor, normalizedPrompt, 15) + tokenScore(entry.tags, promptTokens, 10) + tokenScore(entry.description.split(" "), promptTokens, 2);
|
|
8253
|
-
}
|
|
8254
|
-
function selectByKind(kind, target, prompt, limit) {
|
|
8255
|
-
return OPEN_DESIGN_REGISTRY.filter((entry) => {
|
|
8256
|
-
return entry.kind === kind;
|
|
8257
|
-
}).map((entry) => {
|
|
8258
|
-
return { entry, score: scoreEntry(entry, target, prompt) };
|
|
8259
|
-
}).filter(({ score }) => {
|
|
8260
|
-
return score > 0;
|
|
8261
|
-
}).sort((left, right) => {
|
|
8262
|
-
if (right.score !== left.score) {
|
|
8263
|
-
return right.score - left.score;
|
|
8264
|
-
}
|
|
8265
|
-
return left.entry.id.localeCompare(right.entry.id);
|
|
8266
|
-
}).slice(0, limit).map(({ entry }) => {
|
|
8267
|
-
return entry;
|
|
8268
|
-
});
|
|
8269
|
-
}
|
|
8270
|
-
function selectOpenDesignCandidates(options) {
|
|
8271
|
-
const limitPerKind = options.limitPerKind ?? 8;
|
|
9692
|
+
function selectOpenDesignCandidates() {
|
|
8272
9693
|
return {
|
|
8273
9694
|
registryVersion: OPEN_DESIGN_REGISTRY_VERSION,
|
|
8274
9695
|
source: {
|
|
@@ -8286,48 +9707,13 @@ function selectOpenDesignCandidates(options) {
|
|
|
8286
9707
|
}
|
|
8287
9708
|
],
|
|
8288
9709
|
candidates: {
|
|
8289
|
-
skills:
|
|
8290
|
-
|
|
8291
|
-
|
|
8292
|
-
|
|
8293
|
-
|
|
8294
|
-
),
|
|
8295
|
-
|
|
8296
|
-
"template",
|
|
8297
|
-
options.target,
|
|
8298
|
-
options.prompt,
|
|
8299
|
-
limitPerKind
|
|
8300
|
-
),
|
|
8301
|
-
designSystems: selectByKind(
|
|
8302
|
-
"design-system",
|
|
8303
|
-
options.target,
|
|
8304
|
-
options.prompt,
|
|
8305
|
-
limitPerKind
|
|
8306
|
-
),
|
|
8307
|
-
imageStyles: selectByKind(
|
|
8308
|
-
"image-style",
|
|
8309
|
-
options.target,
|
|
8310
|
-
options.prompt,
|
|
8311
|
-
limitPerKind
|
|
8312
|
-
),
|
|
8313
|
-
audioStyles: selectByKind(
|
|
8314
|
-
"audio-style",
|
|
8315
|
-
options.target,
|
|
8316
|
-
options.prompt,
|
|
8317
|
-
limitPerKind
|
|
8318
|
-
),
|
|
8319
|
-
videoTemplates: selectByKind(
|
|
8320
|
-
"video-template",
|
|
8321
|
-
options.target,
|
|
8322
|
-
options.prompt,
|
|
8323
|
-
limitPerKind
|
|
8324
|
-
),
|
|
8325
|
-
bundleTemplates: selectByKind(
|
|
8326
|
-
"bundle-template",
|
|
8327
|
-
options.target,
|
|
8328
|
-
options.prompt,
|
|
8329
|
-
limitPerKind
|
|
8330
|
-
)
|
|
9710
|
+
skills: filterByKind("skill"),
|
|
9711
|
+
templates: filterByKind("template"),
|
|
9712
|
+
designSystems: filterByKind("design-system"),
|
|
9713
|
+
imageStyles: filterByKind("image-style"),
|
|
9714
|
+
audioStyles: filterByKind("audio-style"),
|
|
9715
|
+
videoTemplates: filterByKind("video-template"),
|
|
9716
|
+
bundleTemplates: filterByKind("bundle-template")
|
|
8331
9717
|
}
|
|
8332
9718
|
};
|
|
8333
9719
|
}
|
|
@@ -8340,10 +9726,7 @@ var artifactRules = [
|
|
|
8340
9726
|
"Produce a single final image file and keep any temporary metadata under the output directory."
|
|
8341
9727
|
];
|
|
8342
9728
|
function createStyledImageAuthoringPacket(options) {
|
|
8343
|
-
const baseSlice = selectOpenDesignCandidates(
|
|
8344
|
-
target: "image",
|
|
8345
|
-
prompt: [options.prompt, ...options.details, ...artifactRules].join("\n")
|
|
8346
|
-
});
|
|
9729
|
+
const baseSlice = selectOpenDesignCandidates();
|
|
8347
9730
|
const candidateSlice = {
|
|
8348
9731
|
...baseSlice,
|
|
8349
9732
|
candidates: {
|
|
@@ -8396,6 +9779,10 @@ function createStyledImageAuthoringPacket(options) {
|
|
|
8396
9779
|
"",
|
|
8397
9780
|
"## Candidate Registry Slice",
|
|
8398
9781
|
`Registry: \`${candidateSlice.registryVersion}\``,
|
|
9782
|
+
"Sources:",
|
|
9783
|
+
...candidateSlice.sources.map((src) => {
|
|
9784
|
+
return `- \`${src.repo}@${src.commit}\``;
|
|
9785
|
+
}),
|
|
8399
9786
|
"",
|
|
8400
9787
|
"```json",
|
|
8401
9788
|
JSON.stringify(candidateSlice.candidates, null, 2),
|
|
@@ -8768,15 +10155,7 @@ function createHtmlArtifactAuthoringPacket(options) {
|
|
|
8768
10155
|
const outputDir2 = outputDirForSite(site);
|
|
8769
10156
|
const hostCommand = `zero host ${outputDir2} --site ${site}${options.kind === "website" ? " --spa" : ""}`;
|
|
8770
10157
|
const title = titleForKind(options.kind);
|
|
8771
|
-
const candidateSlice = selectOpenDesignCandidates(
|
|
8772
|
-
target: options.kind,
|
|
8773
|
-
prompt: [
|
|
8774
|
-
options.prompt,
|
|
8775
|
-
options.slugSource ?? "",
|
|
8776
|
-
...options.details,
|
|
8777
|
-
...options.artifactRules
|
|
8778
|
-
].join("\n")
|
|
8779
|
-
});
|
|
10158
|
+
const candidateSlice = selectOpenDesignCandidates();
|
|
8780
10159
|
const selectionSchema = {
|
|
8781
10160
|
skills: "string[]",
|
|
8782
10161
|
template: "string",
|
|
@@ -8841,6 +10220,10 @@ function createHtmlArtifactAuthoringPacket(options) {
|
|
|
8841
10220
|
"",
|
|
8842
10221
|
"## Candidate Registry Slice",
|
|
8843
10222
|
`Registry: \`${candidateSlice.registryVersion}\``,
|
|
10223
|
+
"Sources:",
|
|
10224
|
+
...candidateSlice.sources.map((src) => {
|
|
10225
|
+
return `- \`${src.repo}@${src.commit}\``;
|
|
10226
|
+
}),
|
|
8844
10227
|
"",
|
|
8845
10228
|
"```json",
|
|
8846
10229
|
JSON.stringify(candidateSlice.candidates, null, 2),
|
|
@@ -10842,7 +12225,7 @@ function registerZeroCommands(prog, commands) {
|
|
|
10842
12225
|
var program = new Command();
|
|
10843
12226
|
program.name("zero").description(
|
|
10844
12227
|
"Zero CLI \u2014 interact with the zero platform from inside the sandbox"
|
|
10845
|
-
).version("9.
|
|
12228
|
+
).version("9.168.0").addHelpText("after", () => {
|
|
10846
12229
|
return buildZeroHelpText();
|
|
10847
12230
|
});
|
|
10848
12231
|
if (process.argv[1]?.endsWith("zero.js") || process.argv[1]?.endsWith("zero.ts") || process.argv[1]?.endsWith("zero")) {
|