How do I give an AI agent a frontend design task?
Describe the audience, page area, visual direction, and testable interactions, then review the changed files and the local page preview.
Maintained by the 路墨 Lumoswitch product team
Open the frontend project, name the page and acceptance criteria, then review both the patch and the rendered page.
How do I turn a design idea into a task?
1. Open the project folder that contains the page code and styles, and name the page or component. 2. Explain what the visitor needs to do, which information matters most, the visual direction, and how the page should behave on a narrow screen. Reference an existing page or palette instead of saying only “make it premium.” 3. State the scope and constraints. Example: “Improve the pricing page in `src/app/pricing`. Help first-time visitors compare plans and see the main limits. Keep the existing brand colors and do not add a UI library. On phones, stack the cards in one column and keep the buttons easy to find. Inspect the existing components and styles first, then implement the change and tell me how to preview it locally.”
How can I ask the agent to work in stages?
1. Choose Plan mode for a page with several sections, then add observable completion criteria such as “no horizontal overflow at a mobile width” and “each pricing card shows its plan name, price, and main limits.” 2. Check that the plan covers layout, copy, and interactions; clarify any missing part before execution. 3. Give specific feedback while it works, for example “Keep the top navigation; adjust only the hierarchy in the plan section.” The current task mode stays fixed for that run; continue in a new turn if you need to change it.
How do I review the frontend result?
1. Check the workspace's file-change record and confirm that only the relevant page, components, and styles changed. 2. Follow the agent's instructions to preview the project; inspect a desktop and narrow width for wrapping, contrast, click targets, and overflow. 3. Run checks that the repository actually provides and read any failures. The workspace can show captured changes and verification records, but it cannot prove that every device size looks correct in a browser.
What if the page still looks wrong?
1. Name the area and visible issue, such as “the second card covers the primary button on a narrow screen,” instead of saying only “it does not look good.” 2. Give a target width or expected layout and ask the agent to change only the relevant component. 3. If an image or font is missing, check the project's asset path and browser errors; if a style seems unchanged, confirm that the preview uses the current workspace. Review the patch and the local page again; generated code cannot replace visual inspection.