Turn an interface idea into a page you can check
Give an agent clear goals, visual references, and page states. Explore design and browser-testing Skills, then inspect desktop, mobile, and dark-mode behavior alongside the appearance.
For people improving an existing interface or building one small page.
A practical order to follow
Describe the job of the page
Identify the user and primary action, then provide the current page or a reference. State what must remain unchanged instead of relying on a vague visual adjective.
Build one page first
Ask the agent to reuse project components, colors, and typography. A design Skill provides guidance; preview and testing capabilities still depend on the agent's tools and local environment.
Check appearance and behavior
Inspect text, scrolling, and controls at wide and narrow sizes. Switch themes, then test submission, errors, and the return path.
Improve this settings page using its existing bold borders and simple style. Preserve fields, save behavior, and APIs. Focus on grouping, spacing, and button hierarchy. Check narrow screens, dark mode, errors, and keyboard use; show a preview before expanding the scope.
Expect an accessible preview and checks for ordinary, empty, loading, and failed states. Screenshots demonstrate appearance; controls still need interaction testing.
Tutorials and common questions
- How do I give an AI agent a frontend design task?
Open the frontend project, name the page and acceptance criteria, then review both the patch and the rendered page.
- How do I check code changes made by an agent?
Inspect the patch, then confirm which tests and reviews actually ran. Do not treat an unrun check as a pass.
- How do I tell whether a Skill fits my task?
Match it to a real task, then review its source, agent compatibility, files, and permissions; inspect unfamiliar content carefully.
- How do I choose and install a community Skill?
Use the community to discover resources; review compatibility, files, and conflicts in the app before installing.
- A Skill is installed. How do I make my agent use it?
Installed does not mean enabled. Apply it using the agent's supported Skills workflow, then verify in a new session.
- Why does an installed Skill not work in my agent?
Installation only places a Skill on the device. Check its enabled state, permissions, and compatibility, then select it for the agent or current workspace.
Explore Skills for this task
Review the purpose and prerequisites before choosing. These are source reading notes; community availability and client compatibility are shown on their respective pages.
Give a web interface a distinct design direction
frontend-designStart from the product, audience, and purpose, then carry a clear visual direction through type, color, layout, and detail. Useful for pages, components, and dashboards.
Prerequisites, example, and checks
- Before you start
- Share the interface purpose, audience, framework, and accessibility or performance constraints. Include brand and design-system rules for existing products.
- Example task
- Design a homepage for an independent coffee brand. Explain the audience and visual concept, typography, and palette, then build a responsive page and check narrow screens and keyboard use.
- Check the result
- Confirm visual choices support the product, and the page remains usable, responsive, and within project constraints. Do not optimize decoration at the expense of function.
Verify a local web app in a browser
webapp-testingPlan and run Playwright browser checks against a locally running web app, observing page behavior, console output, and screenshots. Useful for real interaction flows.
Prerequisites, example, and checks
- Before you start
- Provide a start command, test URL, target flow, and test account or data. Avoid production accounts and side-effecting actions such as real payments.
- Example task
- Start the local shop and use Playwright to check search, filters, and empty results. Save key screenshots and report reproduction steps and console errors.
- Check the result
- Confirm the page finished loading, assertions cover visible outcomes, and failing steps are recorded. A successful script exit alone does not prove the experience works.
Design clear API and module interfaces
api-and-interface-designDefine inputs, outputs, errors, and compatibility before implementation. Useful for new APIs, frontend/backend collaboration, and changes to public interfaces.
Prerequisites, example, and checks
- Before you start
- Provide real use cases and behavior relied on by existing callers. Specify fields and error formats that must remain compatible.
- Example task
- Design a paginated tasks endpoint with request parameters, responses, errors, and edge cases. Preserve existing callers. Present a design and examples before changing the server.
- Check the result
- Review pagination, empty results, permission errors, and old callers. Passing tests alone does not prove a public behavior change is compatible.
Generate and edit images through RunComfy
gpt-image-2This Skill uses RunComfy tooling and services. It helps structure image generation or editing tasks; it does not imply Lumoswitch supplies the same model or free image credits.
Prerequisites, example, and checks
- Before you start
- You need the RunComfy CLI, an account, and service access. Its billing and quotas are separate from Lumoswitch text-model credits.
- Example task
- Prepare an event poster plan with dimensions, composition, text, and elements to preserve. Show the plan and required service before generating after confirmation.
- Check the result
- Confirm the actual service, costs, and output requirements. For edits, inspect preserved text, subjects, and composition beyond the thumbnail.