import React, { useState, useEffect } from 'react'; import { ArrowLeft, Minus, Layers, Target, Sparkles, Eye, Zap, BookOpen, Heart, Lock, Users, AlertOctagon, X } from 'lucide-react'; // --- Data Models (Translated from Chinese to English) --- const corePrinciples = [ { id: '01', title: 'Start with the Experience', subtitle: 'Work backward to the technology.', description: 'Define the problem before choosing the technology. Technology is an enabler, not the selling point.', icon: , color: 'bg-zinc-100 dark:bg-zinc-900', }, { id: '02', title: 'Focus & Subtraction', subtitle: 'The power of saying "No".', description: 'The ability to say "no" determines product quality; subtract until you can\'t anymore, then subtract once more.', icon: , color: 'bg-zinc-100 dark:bg-zinc-900', }, { id: '03', title: 'End-to-End Responsibility', subtitle: 'Integration across the board.', description: 'Take responsibility for the "entire experience": hardware, software, services, channels, after-sales, and privacy.', icon: , color: 'bg-zinc-100 dark:bg-zinc-900', }, { id: '04', title: 'Taste & Opinion', subtitle: 'Products with a stance.', description: 'Make deliberate choices, trade-offs, and establish a style. Avoid compromises and feature checklists.', icon: , color: 'bg-zinc-100 dark:bg-zinc-900', }, { id: '05', title: 'Simplicity is Not Absence', subtitle: 'It is the removal of complexity.', description: 'Complexity is borne by the team behind the scenes, so it is never inflicted on the user.', icon: , color: 'bg-zinc-100 dark:bg-zinc-900', }, { id: '06', title: 'Details are the Product', subtitle: 'Building trust through nuance.', description: 'Micro-interactions, animations, default values, empty states, and error copy build trust and a premium feel.', icon: , color: 'bg-zinc-100 dark:bg-zinc-900', }, { id: '07', title: 'High Standards & Polish', subtitle: 'Never ship "crap".', description: 'It is better to delay a launch than to sacrifice the critical baseline of the user experience.', icon: , color: 'bg-zinc-100 dark:bg-zinc-900', }, { id: '08', title: 'Narrative-Driven', subtitle: 'The power of storytelling.', description: 'A product must have a one-sentence value proposition, three major benefits, and an unforgettable metaphor.', icon: , color: 'bg-zinc-100 dark:bg-zinc-900', }, { id: '09', title: 'Technology & Liberal Arts', subtitle: 'The intersection of utility and emotion.', description: 'Function satisfies "utility," while aesthetics and emotion satisfy the human need for "love" and "identity."', icon: , color: 'bg-zinc-100 dark:bg-zinc-900', }, { id: '10', title: 'Constraints Breed Creativity', subtitle: 'Using limits to innovate.', description: 'Hard constraints like battery life, physical size, cost, and privacy are triggers for design innovation.', icon: , color: 'bg-zinc-100 dark:bg-zinc-900', }, { id: '11', title: 'Small Teams & DRI', subtitle: 'Directly Responsible Individuals.', description: 'Maintain clear ownership and assign "total package responsibility" for the experience to specific individuals.', icon: , color: 'bg-zinc-100 dark:bg-zinc-900', }, ]; const antiPatterns = [ "Substituting technological showboating for genuine user value.", "Pursuing 'many options' rather than focusing on 'good defaults'.", "Piling on features based on a roadmap while ignoring a clear value proposition.", "Using MVP (Minimum Viable Product) as an excuse to ignore quality. Always aim for MLP (Minimum Lovable Product)." ]; // --- Components --- const FadeIn = ({ children, delay = 0 }) => { const [isVisible, setIsVisible] = useState(false); useEffect(() => { const timer = setTimeout(() => setIsVisible(true), delay); return () => clearTimeout(timer); }, [delay]); return (

{children}

); }; const PrincipleCard = ({ principle }) => (

{principle.icon}

{principle.id}

{principle.title}

{principle.subtitle}

{principle.description}

); // --- Main Application --- export default function App() { return (

{/* Hero Section */}

Design Philosophy

Design is how
it works.

Core principles of product and design inspired by Steve Jobs. A framework for building products that reside at the intersection of technology and liberal arts.

{/* Principles Grid */}

{corePrinciples.map((principle, index) => ( ))}

{/* Anti-Patterns Section */}

Anti-Patterns to Guard Against

{antiPatterns.map((pattern, index) => (

{pattern}

))}

{/* Footer */}

); }