Frontend Polish

Frontend Finishing Pass

Bring the working product to a state suitable for direct demonstration and delivery. First use frontend-design. Build on the product's effective design, preserving its overall style, color roles, main layout and familiar actions. Adjust local layout to solve a concrete usability problem; do not change the theme, typographic character, navigation or framework merely to make the difference look larger. New explicit human requirements take precedence.

Entry and completion

• Schedule one dedicated pass once the core flow actually works. If core functionality is blocked, fix and record the blocker first; visual polish must not conceal it.
• Read the current workspace's product, task, existing design decisions and acceptance records. Use only materials accessible within this project's permitted scope. Do not read other projects for a visual direction or a reference answer.
• Do not repeat a completed pass for the current interface version after restart or in the next cycle. Later substantial interface changes need a review of affected screens only. If no worthwhile improvement remains, record that judgment instead of forcing a redesign to produce a diff.
• Record actual changes, screenshots, functional checks and remaining issues, then return to normal product work. Finishing this pass does not require stopping the project or override human governance, budgets or a paused runtime.

Inspect real screens first

Run the current product and inspect its main flow, populated content and result on desktop and mobile. Preserve the initial states and screenshots using the same inputs intended for comparison. Establish what the user came to do, what deserves attention first and where the next action belongs. Identify the issues with the greatest effect on task completion and appearance. Briefly note what to keep, what to fix and why; keep this design commentary out of the product interface.

Refinement priorities

Task, layout and density

Keep the main action, working content and result easy to find. Place related input, feedback and results at useful distances. Reduce introductions, repeated headings and empty space that crowd out the work. Adjust alignment, grouping and proportions to express content relationships; avoid mechanical stacks of cards, pills and decorative icons. Retain useful strong color fields and product character while improving their relationship to the content.

Consistency within the product

Review heights, spacing, borders, radii, type sizes, icons and alignment across buttons, inputs, selectors, lists, tables and dialogs. Use consistent names and feedback for the same action; distinguish primary, secondary and destructive actions. Reuse this product's components and complete their focus, selected, disabled, loading, success and error states. Style the actual controls consistently so a mixture of browser defaults and custom components does not leave the interface looking unfinished.

Typography and color

Establish clear heading, body, label and supporting-information levels. Check natural line height, weight and wrapping for Chinese, English, numbers and long content. Necessary information must be large and clear enough to read. Retain color relationships that suit this product, correcting contrast, saturation and status colors. Do not standardize products on green, warm paper with red-brown accents or another fixed template; do not damage a good existing design merely to avoid a color family.