Back to Details

10-10-frontend

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

10/10 Frontend

10/10 前端设计

Iterate on frontend design using Playwright screenshots until the design scores a perfect 10/10.
通过Playwright截图迭代优化前端设计，直至设计达到10/10的满分。

The Loop

循环流程

Step 1: Screenshot

步骤1：截图

Take a Playwright screenshot of the current state:
typescript
const { chromium } = require('playwright');
const browser = await chromium.launch();
const page = await browser.newPage();
await page.setViewportSize({ width: 1440, height: 900 });
await page.goto('http://localhost:PORT');
await page.screenshot({ path: 'screenshot.png', fullPage: true });
await browser.close();
对当前状态进行Playwright截图：
typescript
const { chromium } = require('playwright');
const browser = await chromium.launch();
const page = await browser.newPage();
await page.setViewportSize({ width: 1440, height: 900 });
await page.goto('http://localhost:PORT');
await page.screenshot({ path: 'screenshot.png', fullPage: true });
await browser.close();

Step 2: Evaluate

步骤2：评估

Read the screenshot and rate it on these criteria (each 1-10):
CriterionWhat to Assess
TypographyFont choices, hierarchy, sizing, spacing, readability
ColorPalette cohesion, contrast, mood, distinctiveness
LayoutSpatial composition, alignment, visual flow, responsiveness
PolishHover states, transitions, micro-interactions, loading states
DistinctivenessDoes it look like AI-generated slop or like a crafted design?
Overall score = average of all criteria.
查看截图并根据以下标准评分（每项1-10分）：
评估标准评估内容
排版（Typography）字体选择、层级结构、尺寸、间距、可读性
色彩（Color）调色板协调性、对比度、氛围、独特性
布局（Layout）空间构图、对齐方式、视觉流、响应式表现
细节打磨（Polish）悬停状态、过渡效果、微交互、加载状态
独特性（Distinctiveness）是看起来像AI生成的粗糙产物，还是精心设计的成果？
总分 = 所有标准的平均分。

Step 3: Fix

步骤3：修复

For each criterion scoring below 8:
  • Identify the specific elements that are weak
  • Apply fixes following the 
    /frontend-design
    skill guidelines
  • Make 1-3 targeted changes (don't overhaul everything at once)
针对每项评分低于8分的标准：
  • 找出表现不佳的具体元素
  • 遵循
    /frontend-design
    技能指南进行修复
  • 进行1-3项针对性修改（不要一次性全盘修改）

Step 4: Re-screenshot

步骤4：重新截图

Go back to Step 1. Take a new screenshot after fixes.
回到步骤1。修复完成后拍摄新的截图。

Stop Condition

停止条件

Stop when ALL criteria score 8+ AND overall score is 10/10.
If after 5 iterations the score is stuck:
  • Step back and reconsider the aesthetic direction
  • Try a completely different approach for the weakest area
  • Consult the user for preference input
当所有标准评分均达到8分以上且总分达到10/10时停止。
如果经过5次迭代后分数停滞不前：
  • 退一步重新考虑美学方向
  • 针对最薄弱的环节尝试完全不同的方案
  • 咨询用户的偏好意见

Rules

规则

  • Always screenshot at desktop (1440x900) AND mobile (390x844) widths
  • Evaluate both viewports in each iteration
  • Do not declare 10/10 prematurely — be honest in your assessment
  • Document each iteration: score, changes made, reasoning
  • Maximum 10 iterations. If not 10/10 by then, report what's remaining.
  • 始终在桌面端（1440x900）和移动端（390x844）两种宽度下截图
  • 每次迭代都要评估两种视口的表现
  • 不要过早宣布达到10/10——评估要实事求是
  • 记录每次迭代：分数、所做修改、修改理由
  • 最多进行10次迭代。如果届时仍未达到10/10，报告剩余的问题。