Build a single-screen HTML prototype for quarterly OKRs, a framework of objectives and measurable key results. Show three objectives with progress bars, owners, status labels, and a sidebar summarizing metrics, notable changes, and blockers.
中文简介正在准备中。当前显示英语简介。
- Prototype a quarterly team goals dashboard
- Compare current and target values for key results
- Display objective owners and progress status together
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Build a single HTML dashboard for comparing metrics across social platforms. Include interactive charts, point details, selected-period comparisons, and light or dark themes, while adapting colors, typography, and components to an existing design guide.
中文简介正在准备中。当前显示英语简介。
- Reviewing metrics across multiple social platforms
- Comparing selected periods on charts
- Exploring chart points and related insights
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Build a magazine-style HTML presentation that explains a brand’s purpose, beliefs, and direction to partners, press, or a community. Combine seven slide types with horizontal navigation, touch swipes, and a thumbnail overview.
中文简介正在准备中。当前显示英语简介。
- Explaining a brand story to partners and press
- Creating a founder pitch or conference presentation
- Combining product details, metrics, and customer quotes
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Create a single HTML wireframe for a desktop dashboard using grey blocks, placeholder text bars, and crossed image boxes. Review navigation, information hierarchy, and panel placement before choosing final colors, copy, or imagery.
中文简介正在准备中。当前显示英语简介。
- Reviewing a desktop dashboard layout
- Checking navigation and information hierarchy
- Planning KPI, chart, and table placement
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Create a single-page editorial landing site from a brand brief, using paper textures, collage imagery, and structured content sections. The output includes responsive layouts, scroll animations, and sticky navigation, with generated, placeholder, or supplied images.
中文简介正在准备中。当前显示英语简介。
- Building an editorial landing page for a brand
- Presenting a studio's services and selected work
- Previewing a page with placeholder images
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Create a pre-launch landing page with a brand logo, product message, and email signup form. Follow DESIGN.md for colors, fonts, and layout, producing a single HTML file with mobile layouts and form validation.
中文简介正在准备中。当前显示英语简介。
- Create an email waitlist page before a product launch
- Build a signup page for beta participants
- Collect interest in an early access program
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Build a trading analysis dashboard as a single HTML file, with dense market panels and interactive charts. Include light and dark themes, Live/Demo controls, chart focus views, and a keyboard command menu for navigating the interface.
中文简介正在准备中。当前显示英语简介。
- Prototyping a financial analysis terminal
- Presenting a dashboard with dense market panels
- Demonstrating chart tooltips and focus views
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Create an HTML pricing page with plan cards, a feature comparison table, expandable FAQs, and action buttons. The skill adapts the number of plans to the brief and follows the project's colors, typography, and component patterns.
中文简介正在准备中。当前显示英语简介。
- Prototyping a subscription pricing page
- Comparing features across service plans
- Presenting personal and business options
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Turn a feature brief into a one-page product requirements document in HTML. Organize the problem, goals, success measures, user needs, delivery phases, and open questions so the team can review the proposed feature and its scope.
中文简介正在准备中。当前显示英语简介。
- Draft a requirements document for a new feature
- Align a team on goals and excluded work
- Define success measures and measurement methods
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Turn product requirements, roadmaps, architecture reviews, and retrospectives into HTML slides for decision-making. Choose one of eight visual themes to create a consistent, horizontally navigable deck, using source evidence and real numbers to support review.
中文简介正在准备中。当前显示英语简介。
- Building a business case for a proposed feature
- Preparing a roadmap for stakeholder review
- Presenting architecture choices for a decision
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Create a horizontal-swipe HTML deck for an operating review, organizing growth, cash burn, and sustainability around leadership decisions. Use supplied layouts and the active design system to produce a single index.html file.
中文简介正在准备中。当前显示英语简介。
- Preparing an operating review for leadership
- Creating a board pre-read for a decision
- Presenting growth and cash burn in HTML slides
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Create three square social media cards with connected headlines, consistent branding, and distinct cinematic colors. The result is a single HTML layout that presents the cards together while keeping each panel readable on its own.
中文简介正在准备中。当前显示英语简介。
- Designing a three-card Instagram carousel
- Creating a branded series for LinkedIn
- Preparing connected cards for an X thread
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Build a single HTML visualizer for particles, fractals, simulations, or data. It moves heavy calculations into a Web Worker, a background browser process, and draws on a canvas while targeting smooth 60fps rendering.
中文简介正在准备中。当前显示英语简介。
- Prototyping a particle or physics simulation
- Visualizing Mandelbrot or Julia fractals
- Building an audio or data visualizer
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Create an animated HTML scene for history or trivia explainers, combining pixel art, a prominent year, moving text, and a scrolling timeline. CSS loops provide motion, making the scene suitable for screen recording.
中文简介正在准备中。当前显示英语简介。
- Creating an animated scene for a history explainer
- Presenting trivia with pixel-art characters
- Preparing a retro animation for screen recording
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Summarize the past 24 hours of GitHub pull requests, review requests, issues, CI runs, and merges in a daily briefing. The GitHub-style page highlights pending reviews and failed automated checks.
中文简介正在准备中。当前显示英语简介。
- Reviewing the past 24 hours of GitHub activity
- Checking pending review requests
- Spotting failed CI checks
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Build a website prototype as a single HTML file using a supplied template and section layouts. Suitable for landing pages, pricing pages, and documentation indexes, with colors adapted to an existing design system.
中文简介正在准备中。当前显示英语简介。
- Prototyping a product landing page
- Creating a pricing comparison page
- Designing a documentation index
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Create soft, polished web prototypes with silver or cream backgrounds, nested card borders, rounded surfaces, and carefully specified motion. The skill defines page sections, buttons, navigation, and mobile layouts for a consistent visual style.
中文简介正在准备中。当前显示英语简介。
- Prototyping a calm SaaS website
- Creating a soft visual style for a consumer product site
- Building a feature page with cards and prominent action buttons
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Create full-screen animated visuals with WebGL, a browser technology for GPU rendering. Combine shaders, 3D scenes, or particles with a text overlay, and deliver the result as one self-contained HTML file without external requests.
中文简介正在准备中。当前显示英语简介。
- Create a website hero animation
- Build generative art with a headline
- Prototype a 3D scene or particle field
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Prototype a single-page website for SaaS, documentation, or knowledge products. Use warm off-white backgrounds, serif headings, fine dividers, generous spacing, and subtle motion to create a restrained layout with features and a signup or pricing section.
中文简介正在准备中。当前显示英语简介。
- Prototype a SaaS marketing page
- Explore a documentation page design
- Build an introduction page for a knowledge product
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Turn Markdown or notes into a magazine-style HTML article. A large title, centered reading column, distinctive headings, styled quotations, and labeled code blocks give long essays and newsletters a consistent visual structure.
中文简介正在准备中。当前显示英语简介。
- Turning Markdown into a magazine-style article
- Formatting an essay from notes
- Designing a long-form newsletter
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Summarize the past 24 hours of Gmail activity into items needing action, items worth attention, and informational updates. Orbit presents the daily digest as an opened email in a Gmail-style reading view using an authenticated Gmail connection.
中文简介正在准备中。当前显示英语简介。
- Reviewing the past 24 hours of Gmail activity
- Checking messages that need action
- Separating noteworthy updates from informational mail
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Build a single-page SaaS product landing page with features, testimonials or logos, optional pricing, and clear action buttons. Follow the colors, fonts, and layout rules in DESIGN.md, and deliver one self-contained HTML file.
中文简介正在准备中。当前显示英语简介。
- Creating a landing page for a SaaS product
- Building a product page that follows an existing design system
- Presenting features, testimonials, and pricing together
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Add a live adjustment panel to an HTML page so viewers can explore colors, text sizes, spacing, themes, and motion. Changes appear immediately and are saved in the browser for the next visit.
中文简介正在准备中。当前显示英语简介。
- Fine-tune a landing page’s colors and spacing
- Demonstrate brand or design system variations
- Add adjustable appearance controls to a standalone demo
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新
Create a 16:9 animated hero composition with rotating rings, a globe or other focal graphic, and expressive typography. Deliver a single HTML document with CSS animations that a frame-capture exporter such as HyperFrames can turn into video.
中文简介正在准备中。当前显示英语简介。
- Create an animated hero for a marketing page
- Design a title card with moving typography
- Build a looping poster with rotating rings and a globe
feimacode/open-design-agent-kit☆ 10232026年10月31日 更新