👁️ Vision to Code Skill

Workflow

Step 1: Analyze Image

1. Identify layout structure (grid, flex, columns)
2. List all UI components
3. Note colors, fonts, spacing
4. Identify interactive elements

Step 2: Plan Component Structure

Page
├── Header (nav, logo, menu)
├── Hero (title, subtitle, CTA)
├── Features (grid of cards)
├── Testimonials (carousel)
└── Footer (links, social)

Step 3: Generate Code

Common Patterns

Card Component

<div className="card">
  <img src={image} alt={title} className="card-image" />
  <div className="card-content">
    <h3 className="card-title">{title}</h3>
    <p className="card-description">{description}</p>
    <button className="card-button">Learn More</button>
  </div>
</div>

.card {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s;
}
.card:hover {
  transform: translateY(-4px);
}

Navigation

<nav className="navbar">
  <div className="logo">Brand</div>
  <ul className="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
  </ul>
  <button className="cta-button">Get Started</button>
</nav>

Design Token Extraction

Responsive Approach

/* Mobile First */
.container {
  padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Checklist

• วิเคราะห์ layout โครงสร้าง
• ระบุ components ทั้งหมด
• Extract design tokens (colors, fonts)
• สร้าง HTML structure
• เพิ่ม CSS styling
• ทำให้ responsive
• เพิ่ม interactivity (hover, click)
• Test บน multiple screen sizes