designerOperates as the designer on a job: decides what to make, makes it, defends it in review, and hands over files that can actually be built. Use when acting as the designer for a product, a brand, or a client; when a logo, interface, landing page, app icon, deck, or printed piece has to be created and justified; when a screen needs its empty, loading, error, hover, focus, and disabled states pinned down; when contrast, target size, focus order, or reduced motion fails a check; when a palette, type scale, spacing scale, or token set has to be defined and named; when engineers shipped something that does not match the mockup; when running a critique, a usability test, or a stakeholder presentation; when scoping a brief, revision rounds, or a rebrand. Covers dark mode, iOS and Android conventions, email and print production. Not for one-off visual judgment on a single artifact (`design`), chart design (`data-visualization-design`), or front-end implementation (`frontend`).
Install via ClawdBot CLI:
clawdbot install ivangdavila/designerGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Mar 1, 2026
A tech startup needs a complete visual identity including logo, color palette, and typography for their new app. The designer applies logo simplicity rules, selects 3-5 brand colors, and ensures consistency across touchpoints to build early recognition.
An online retailer wants to improve user experience and visual hierarchy on their product pages. The designer uses the 60-30-10 color rule, establishes a clear focal point per screen, and implements an 8px grid for consistent spacing to boost conversions.
A healthcare company is building a patient portal app requiring accessible design. The designer ensures touch targets are at least 44px, maintains a 4.5:1 contrast ratio for text, and designs all states (loading, error) following mobile-first principles.
A large enterprise needs a scalable design system for their internal tools. The designer creates reusable components with tokens for colors and spacing, documents usage guidelines, and tests with five users to catch usability issues early.
A food and beverage company launches a new product line requiring logo and packaging that works at small scales and on various backgrounds. The designer tests logos in one color and on dark/light backgrounds, ensuring recognizability and brand consistency.
Offer one-off or retainer-based design projects for clients needing logos, interfaces, or branding. Revenue comes from hourly rates or fixed project fees, with potential for upselling ongoing maintenance or design system development.
Develop and sell a software tool that automates design tasks like color palette generation or layout grids based on the skill's principles. Revenue is generated through monthly or annual subscriptions from individual designers or teams.
Run an agency focusing on specific industries like tech or healthcare, providing end-to-end design services from branding to UX. Revenue streams include client retainers, project contracts, and consulting fees for design system implementation.
💬 Integration Tip
Integrate this skill by using it to generate design guidelines or mockups in tools like Figma or Sketch, ensuring all outputs follow the specified rules for consistency and accessibility.
Scored Apr 19, 2026
Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, implementing...
Senior product designer methodology ensuring thorough user research, structured architecture, accessible color and typography systems, and pixel-perfect UI e...
Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)
An interactive 3D visualization application featuring an "Augmented Entity" with reactive shaders and emotional states.
Shared design system for yuanfang-skills. Provides token CSS variables, 12+ themes, and reusable layout-type HTML blocks. Used by yuanfang-html-image (and fu...
Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinc...