Map frontend tasks to design-style prompts and load Markdown style files.
npx skills add https://github.com/NakanoSanku/OhMySkills --skill design-style
Please help me install this Agent Skill. Skill: design-style Source: https://github.com/NakanoSanku/OhMySkills/tree/main/design-style Command: npx skills add https://github.com/NakanoSanku/OhMySkills --skill design-style
This Skill helps designers and front-end engineers quickly generate UI scaffolds in a chosen design system, enabling consistent aesthetics, faster iteration, and reduced complexity when creating production-grade interfaces.
prompts/ directory based on user-specified aesthetics (e.g., ModernDark, Academia, Bauhaus).Use the design-style skill to load a design system prompt and generate frontend components following a chosen aesthetic. For example, "Design a React landing page using ModernDark style from the prompts directory."
High-intent search queries and answers about installing and using this skill.
Design-style maps your frontend task to a design-style prompt, automatically loading from a prompts directory and extracting design tokens—colors, typography, spacing, radii—to guide component generation across React, Vue, and Next.js frameworks with consistent aesthetics.
Yes, design-style handles landing pages, dashboards, UI components, and styling requests. It selects from available styles like Academia, Art Deco, Bauhaus, Cyberpunk, Modern Dark, Enterprise, and Minimal to produce production-ready UI matching your chosen aesthetic.
Design tokens are centralized variables for colors, typography, border radii, and shadows. Design-style extracts these from Markdown prompts and consolidates them into a single configuration, ensuring all generated components follow consistent design rules and patterns.
Design-style orchestrates code generation for React, Vue, and Next.js, building reusable components that match the loaded design system while maintaining accessibility and responsive behavior across all three frameworks.
Design-style automatically maps your frontend task intent to a design style, loading the corresponding Markdown prompt from the prompts directory and extracting its tokens without requiring manual style selection in most cases.
ricardops34Extract design tokens from CSS, theme configs, and token files into markdown.
yairbedermanTranslate Figma designs into React and Vue UI components with token-driven styling.
WellApp-aiAlign UI decisions with design system tokens, Storybook stories, and codebase patterns.
lengo0951Style React user interfaces with shadcn/ui and Tailwind CSS.