Packs
4 packs@owl-listener
Design Systems
Design system skills: component specs, design tokens, naming conventions, spacing and grid systems, accessibility standards, and documentation.
11 skills · pack
curated
Ship Brand Design Guide
Generate a brand design guide including color palette, typography, UI components, and mockups.
5 skills · pack
curated
Create Design System Documentation
Generate component specifications, pattern library entries, and design system documentation for UI consistency.
8 skills · pack
curated
Build Accessible React UI
Install this pack to build an accessible, performant React UI component from design to audit.
4 skills · pack
Results for “component-design”
5 skillsfigma-code-connect-components
Connects Figma design components to their code implementations using Figma's Code Connect feature, analyzing design structure and scanning codebases for matching components.
23.3k · bundle
figma
Integrates Figma Dev Mode via MCP to extract assets, components, styles, and design tokens, converting designs to code with high fidelity.
4
More results
figma
Import Figma designs into HyperFrames compositions as frozen assets, brand tokens, components, motion animations, and shaders.
· bundle
n8n-subworkflows
Build reusable, composable n8n sub-workflows with typed inputs, stateless or stateful design, and discoverable naming conventions.
5.7k · bundle
architecture
Use when designing a new system, choosing between architectural patterns, planning how components will connect, evaluating scalability and reliability trade-offs, or reviewing an existing system for structural problems. For system design, service boundaries, database design, API structure, monolith vs microservices decisions, and architecture decision records (ADRs). Activate when user says "how should I structure this", "design the system", "is this architecture right", or "plan the backend".
0