{"slug": "front-end-prompt-md", "title": "front-end-prompt.md", "summary": "A developer built a production-grade landing page for Northstar Studio, a digital product design and development company targeting startups and enterprises in the AI era. The page uses Next.js, TypeScript, Tailwind CSS, and Framer Motion, following an editorial minimalism and modern Swiss design style while avoiding common AI-generated design patterns.", "body_md": "สร้างเว็บไซต์ Landing Page ระดับ Production สำหรับบริษัทชื่อ **Northstar Studio** บริษัทรับออกแบบและพัฒนา Digital Product สำหรับ Startup และองค์กรในยุค AI\n\nออกแบบ Landing Page ที่ดูมีรสนิยม มีความเป็นมนุษย์ และมี Art Direction ชัดเจน\n\nเว็บไซต์ต้องดูเหมือนผลงานจาก Digital Agency ระดับมืออาชีพ ไม่ใช่ Template สำเร็จรูป และต้องหลีกเลี่ยงงานออกแบบลักษณะ “AI Slop”\n\nกลุ่มเป้าหมายคือ Founder, Startup และบริษัทที่ต้องการสร้าง SaaS, Web Application หรือ AI Product\n\nใช้เทคโนโลยีต่อไปนี้:\n\n- Next.js App Router\n- TypeScript\n- Tailwind CSS\n- Lucide Icons\n- Framer Motion สำหรับ Animation เฉพาะจุดที่จำเป็น\n- ใช้ Semantic HTML\n- รองรับ Responsive Design ตั้งแต่ Mobile ถึง Desktop\n\nสร้างเป็น Front-end เท่านั้น ไม่ต้องมีฐานข้อมูลและไม่ต้องมีระบบ Authentication\n\nเว็บไซต์ต้องสามารถรันได้ด้วยคำสั่ง:\n\n```\nnpm install\nnpm run dev\n```\n\nออกแบบในแนว **Editorial Minimalism ผสมกับ Modern Swiss Design**\n\nบุคลิกของเว็บไซต์:\n\n- มั่นใจ\n- เรียบง่าย\n- ฉลาด\n- ทันสมัย\n- ไม่ดูพยายามมากเกินไป\n- มีรายละเอียดเล็ก ๆ ที่ทำให้งานดู Premium\n\nใช้ Layout ที่มีจังหวะและลำดับสายตาชัดเจน ไม่จำเป็นต้องจัดทุกอย่างให้อยู่ตรงกลาง\n\nใช้ Grid, Negative Space, Typography และ Alignment เป็นองค์ประกอบหลักของงานออกแบบ\n\nเลือกใช้สีพื้นหลังโทน Off-white, Warm Gray หรือ Charcoal พร้อม Accent Color เพียงหนึ่งสี\n\nTypography ต้องมี Contrast ระหว่าง Heading, Body, Label และ Metadata อย่างชัดเจน\n\nสามารถใช้ตัวอักษรขนาดใหญ่ได้ แต่ต้องมีเหตุผลทาง Visual Hierarchy ไม่ใช่แค่ทำให้ Hero ดูใหญ่\n\nห้ามใช้รูปแบบงานออกแบบที่พบได้บ่อยในเว็บไซต์ซึ่งสร้างด้วย AI เช่น:\n\n- Gradient สีม่วง น้ำเงิน หรือชมพูเต็มหน้าจอ\n- Glassmorphism จำนวนมาก\n- กล่อง Card ที่มีขอบมนเหมือนกันทุก Section\n- Floating Orb หรือ Blob ตกแต่งพื้นหลัง\n- Glow Effect รอบทุกองค์ประกอบ\n- Hero Section ที่มีเพียง Heading อยู่ตรงกลางและปุ่มสองปุ่ม\n- Grid การ์ด 3 ใบที่หน้าตาเหมือนกัน\n- Dashboard Mockup แบบ Generic\n- ข้อความประเภท “Revolutionize your workflow”\n- ข้อความ Marketing ที่กว้างและไม่มีความหมาย\n- Icon อยู่ในกล่องสี่เหลี่ยมสี Gradient\n- Animation ที่เกิดขึ้นกับทุกองค์ประกอบ\n- Border Radius ขนาดใหญ่เกินความจำเป็น\n- ใช้เงาหนักหรือสี Accent มากเกินไป\n- ใส่องค์ประกอบเพื่อเติมพื้นที่โดยไม่มีจุดประสงค์\n\nอย่าออกแบบให้ทุก Section มีโครงสร้างเหมือนกัน\n\nอย่าใช้ Lorem Ipsum และอย่าใช้ข้อความ Placeholder\n\nเว็บไซต์ควรมี Section ต่อไปนี้ แต่สามารถตีความ Layout ได้อย่างอิสระ\n\nNavigation แบบเรียบง่าย ประกอบด้วย:\n\n- Logo แบบ Typography\n- Work\n- Services\n- Process\n- About\n- ปุ่ม “Start a project”\n\nNavigation ต้องดูเข้ากับ Visual Language ของเว็บไซต์ และรองรับ Mobile Menu\n\nสร้าง Hero ที่มี Composition น่าสนใจและไม่ Generic\n\nเนื้อหาหลัก:\n\n**We design digital products people actually want to use.**\n\nคำอธิบาย:\n\nNorthstar partners with ambitious teams to turn complex ideas into focused, usable and scalable digital products.\n\nCall to Action:\n\n- View selected work\n- Start a project\n\nเพิ่ม Visual Element ที่สื่อถึงกระบวนการคิด การออกแบบระบบ หรือการสร้าง Product แต่ห้ามใช้ภาพ Stock และห้ามใช้ Dashboard Mockup แบบ Generic\n\nสามารถสร้าง Visual ด้วย CSS, Typography, Grid, Lines, Labels, Shapes หรือ UI Fragment ที่มีความหมาย\n\nแสดง Case Study จำนวน 3 โปรเจกต์\n\nแต่ละโปรเจกต์ต้องมีชื่อ คำอธิบาย ประเภทงาน ปี และผลลัพธ์ทางธุรกิจ\n\nตัวอย่างโปรเจกต์:\n\n- Aster — AI Workspace for Research Teams\n- Forma — Financial Planning Platform\n- Common Ground — Community Management System\n\nอย่าวางเป็น Card Grid แบบธรรมดา ให้ใช้ Editorial Layout หรือ Project Index ที่มีจังหวะในการจัดวาง\n\nบริการหลัก:\n\n- Product Strategy\n- UX and UI Design\n- Web Development\n- AI Product Integration\n\nอธิบายแต่ละบริการแบบสั้น กระชับ และมีความหมาย\n\nSection นี้ควรให้ความรู้สึกเหมือน Service Index หรือ Capability List มากกว่ากล่อง Card\n\nอธิบายกระบวนการทำงาน 4 ขั้นตอน:\n\n- Discover\n- Define\n- Design\n- Deliver\n\nทำให้ผู้ชมเข้าใจว่าบริษัทไม่ได้เพียงสร้างหน้าตาที่สวย แต่ช่วยคิดตั้งแต่ Business Problem จนถึงการส่งมอบ Product\n\nสร้าง Section ที่มีข้อความเด่น:\n\n**Good products are not created by adding more. They are created by deciding what matters.**\n\nใช้ Section นี้เป็นจุดพักสายตา และแสดงแนวคิดของบริษัทผ่าน Typography และ Composition\n\nใส่ Testimonial จาก Founder ของบริษัทสมมติหนึ่งราย\n\nข้อความต้องมีความเป็นธรรมชาติ ไม่ดูเหมือนข้อความโฆษณาที่ AI สร้างขึ้น\n\nปิดท้ายด้วยข้อความ:\n\n**Have something worth building?**\n\nพร้อมคำอธิบายสั้นและปุ่ม “Tell us about your project”\n\nประกอบด้วย:\n\n- Company Name\n- Location\n- Social Links\n- Current Year\n- ข้อความสั้นที่สะท้อนตัวตนของ Studio\n\nเพิ่ม Micro-interaction อย่างระมัดระวัง เช่น:\n\n- Navigation Transition\n- Hover State ของ Project\n- Text Reveal บางส่วน\n- Subtle Image หรือ Layout Movement\n- Smooth Mobile Menu\n\nAnimation ต้องช่วยเพิ่มความเข้าใจหรือความรู้สึกของเว็บไซต์ ไม่ใช่ทำเพื่อโชว์เทคนิค\n\nรองรับ `prefers-reduced-motion`\n\n- Responsive ทุกขนาดหน้าจอ\n- Mobile Layout ต้องถูกออกแบบจริง ไม่ใช่เพียงย่อ Desktop\n- Navigation ใช้งานได้\n- ปุ่มและลิงก์มี Hover และ Focus State\n- Contrast อ่านง่าย\n- รองรับ Keyboard Navigation\n- ใช้ Heading Structure ถูกต้อง\n- ไม่มี Horizontal Overflow\n- ไม่มีข้อความล้น Container\n- ไม่มี Element ซ้อนกันเมื่อหน้าจอเล็ก\n- ใช้ภาพหรือ Visual ที่โหลดเร็ว\n- ให้ความสำคัญกับ Performance และ Accessibility\n\n- แยก Component อย่างเหมาะสม\n- ตั้งชื่อ Component และ Variable ให้สื่อความหมาย\n- หลีกเลี่ยง Component ที่ใหญ่เกินไป\n- ลดการเขียนข้อมูลซ้ำ\n- ใช้ Array และ Mapping สำหรับข้อมูลที่มีโครงสร้างซ้ำ\n- ห้ามใช้\n`any`\n\n- ห้ามเขียน Inline Style โดยไม่มีเหตุผล\n- ไม่ต้องสร้าง Design System ที่ซับซ้อนเกินความจำเป็น\n- Code ต้องอ่านง่ายและพร้อมนำไปพัฒนาต่อ\n\nก่อนจบงาน ให้ตรวจสอบเว็บไซต์ด้วยตัวเองในขนาดหน้าจอต่อไปนี้:\n\n- Mobile: 375px\n- Tablet: 768px\n- Desktop: 1440px\n\nตรวจสอบและแก้ไข:\n\n- Responsive Layout\n- Spacing\n- Typography\n- Contrast\n- Overflow\n- Broken Interaction\n- Accessibility\n- Visual Consistency\n- Console Errors\n\nอย่าเพียงอธิบายแนวคิดหรือส่ง Mockup\n\nให้สร้างเว็บไซต์ที่ใช้งานได้จริง พร้อมไฟล์ทั้งหมดที่จำเป็น และสรุปท้ายงานสั้น ๆ ว่า:\n\n- Art Direction ที่เลือกคืออะไร\n- มี Design Decision สำคัญอะไรบ้าง\n- หลีกเลี่ยงรูปแบบ AI Slop อย่างไร\n- มีข้อจำกัดหรือสิ่งใดที่ควรพัฒนาต่อ", "url": "https://wpnews.pro/news/front-end-prompt-md", "canonical_source": "https://gist.github.com/ohmiler/490f2b2e849fe4fab133d0a42053f918", "published_at": "2026-07-11 01:07:26+00:00", "updated_at": "2026-07-11 03:09:50.795146+00:00", "lang": "en", "topics": ["developer-tools", "ai-products"], "entities": ["Northstar Studio", "Next.js", "TypeScript", "Tailwind CSS", "Framer Motion", "Lucide Icons"], "alternates": {"html": "https://wpnews.pro/news/front-end-prompt-md", "markdown": "https://wpnews.pro/news/front-end-prompt-md.md", "text": "https://wpnews.pro/news/front-end-prompt-md.txt", "jsonld": "https://wpnews.pro/news/front-end-prompt-md.jsonld"}}