prototype — 33 brand-grade prototype agents.
Filtered to od.mode: prototype. Every skill below reads the active DESIGN.md as a system prompt, so it inherits colors, type, and spacing from any portable system you pair it with.
- 001 doc-kami-parchment Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.
- 002 agent-browser Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, testing web apps, dogfooding Open Design previews, QA, bug hunts, or reviewing app quality. Prefer local Open Design preview URLs unless the user explicitly asks for external browsing.
- 003 article-magazine Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
- 004 artifacts-builder Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).
- 005 card-twitter Twitter quote or data card designed to pair with a post.
- 006 card-xiaohongshu Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
- 007 d3-visualization Teaches the agent to produce D3 charts and interactive data visualizations. A comprehensive D3.js skill with examples across chart types and techniques giving the agent expert-level knowledge to generate complex, interactive visualizations. Useful for editorial dashboards, reports, data-rich prototypes, and explanatory graphics.
- 008 data-report Turns CSV, Excel, or JSON data into a polished visual report page.
- 009 doc Read, create, and edit .docx documents with formatting and layout fidelity via OpenAI's document skill.
- 010 docx Create, edit, and analyze Word documents with tracked changes, comments, and formatting. Useful for design briefs, copy docs, and review-ready deliverables.
- 011 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".
- 012 flutter-animating-apps Implement animated effects, transitions, and motion in Flutter apps. Useful for native iOS/Android motion design.
- 013 frontend-dev Full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Useful for hero pages and showcase sites.
- 014 gsap-core Core GSAP API with gsap.to(), from(), fromTo(), easing, duration, stagger, and defaults. Production-grade web animation primitives.
- 015 gsap-react GSAP React integration with useGSAP hook, refs, gsap.context(), cleanup, and SSR. Ships safe motion in React + Next.js apps.
- 016 gsap-scrolltrigger GSAP ScrollTrigger for scroll-linked animations, pinning, scrub, and refresh handling. Useful for editorial sites and product pages.
- 017 gsap-timeline GSAP Timelines with sequencing, position parameter, labels, nesting, and playback control. Useful for orchestrating multi-step motion sequences.
- 018 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.
- 019 login-flow Mobile login and authentication flow screens
- 020 minimax-docx Professional DOCX document creation and editing using OpenXML SDK. Useful for branded reports, polished proposals, and template-based authoring.
- 021 minimax-pdf Generate, fill, and reformat PDFs with a token-based design system and 15 cover styles. Useful for branded PDFs, e-guides, and reports.
- 022 mockup-device-3d Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.
- 023 pdf Extract text, create PDFs, and handle forms. Useful for press releases, branded one-pagers, and printable design deliverables.
- 024 poster-hero Vertical poster or Moments-style share image with strong visual impact.
- 025 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.
- 026 research-decision-room Turn messy user research notes, interviews, support tickets, surveys, and product context into an evidence-backed decision room: a single HTML artifact with an evidence ledger, theme map, confidence heatmap, opportunity matrix, decision memo, and experiment queue. Use when teams need to move from qualitative signals to product or design decisions without fabricating certainty.
- 027 resume-modern Modern minimal resume, single A4 page, ready for print or PDF export.
- 028 shader-dev GLSL shader techniques for ray marching, fluid simulation, particle systems, and procedural generation. Useful for hero visuals and motion stills.
- 029 social-reddit-card Realistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.
- 030 social-spotify-card Spotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.
- 031 social-x-post-card Realistic X post card with engagement metrics (likes, reposts, views), suited to video overlays or shareable image cards.
- 032 threejs Three.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.
- 033 web-artifacts-builder Build complex claude.ai HTML artifacts with React and Tailwind. Anthropic's reference workflow for shipping rich, embeddable artifacts.