You are an expert tailwind developer. A user will provide you with a
low-fidelity wireframe of an application and you will return
a single html file that uses tailwind to create the website.
They may also provide you with the html of a previous design that they want you to iterate from.
Carry out any changes they request from you.
In the wireframe, the previous design's html will appear as a white rectangle.
Use creative license to make the application more fleshed out.
if you need to insert an image, use a colored fill rectangle as a placeholder. Respond only with the html file.
ไม่ค่อยแน่ใจว่าทำไมถึงพูดถึง "creative license" ตรงนี้ ส่วน user prompt ในแต่ละครั้งที่สร้างจะเป็นแบบนี้:
[IMAGE_LINK]
Turn this into a single html file using tailwind.
ลองตรวจด้วย screen reader แล้ว พอกดปุ่มไม่มีการประกาศอะไรเลย นี่เป็นปัญหา ควรพูดประมาณว่า “Checkbox B moved to the left”
ถ้าไม่มีการแจ้งใด ๆ ผู้ใช้จะไม่รู้ว่าพอกดปุ่มแล้วมีอะไรเกิดขึ้นจริงหรือไม่ หน้าทดสอบ: https://output.jsbin.com/jixoqur/quiet
วิธีนั้นง่ายมาก แค่ให้พรอมป์ต์ใหม่กับ GPT-4: "Thanks. Please connect it to the rest of this code:"
ถ้าอยากให้มันทำได้ดียิ่งขึ้น ก็เติม "it's very important for my career" เข้าไปด้วย
1 ความคิดเห็น
ความคิดเห็นจาก Hacker News
Steve จาก tldraw เอง ขอโทษด้วยที่นี่เป็น โปรเจกต์ของเล่นที่มีแพตเทิร์นด้านความปลอดภัยแย่มาก ถ้าอยากรันในเครื่องหรือดูซอร์ส อยู่ที่นี่: https://github.com/tldraw/draw-a-ui
ตัวอย่างอื่น ๆ ดูได้ที่ https://twitter.com/tldraw ถ้ามีคำถามเกี่ยวกับ tldraw หรือโปรเจกต์นี้ ผมตอบได้ นี่ไม่ใช่ของที่จะไปทำให้งานใครหายไป แต่เอามาเล่นแล้วสนุกจริง ๆ และมีตัวอย่างที่ซับซ้อนกว่านี้อยู่ที่นี่: https://twitter.com/tldraw/status/1725083976392437894
มี license server ที่เพิ่งเปิดเป็น MIT license ด้วย เขียนด้วย Elixir และใช้รัน https://go.robocoder.app ถ้าต้องการความช่วยเหลือในการตั้งค่า ติดต่อมาได้: https://github.com/emcmanus/robocoder-server/
คำตอบเจอใน GitHub README แล้ว เนื้อหาคือ “ถ้าจะใช้ API key ของตัวเอง ต้องมีสิทธิ์เข้าถึง usage tier 1 และให้ดู tier ปัจจุบันกับวิธีอัปเกรดใน OpenAI settings”
system prompt ใน repository เป็นแบบนี้:
ไม่ค่อยแน่ใจว่าทำไมถึงพูดถึง "creative license" ตรงนี้ ส่วน user prompt ในแต่ละครั้งที่สร้างจะเป็นแบบนี้:
https://github.com/tldraw/draw-a-ui/blob/8a889bf36afc06fbb0c...
ดูเหมือนว่าถ้าถ่ายสกรีนช็อตจากแคนวาส tldraw ปกติ แล้วส่งให้ API พร้อม prompt นี้ ก็ง่ายพอที่จะรันแบบ “ส่วนตัว” ได้
ลองใส่โมเดลจากคำถามสัมภาษณ์ของ Facebook เข้าไป เป็นรายการ checkbox สองรายการกับปุ่มสองปุ่มสำหรับย้ายรายการที่ถูกติ๊กไปมาระหว่างกัน ซึ่งมันทำได้ถูกต้อง: https://gist.github.com/milesrichardson/2a2f77d4bfb19c3b28dc...
toList.appendChild(item.closest('li'));จะ ย้าย รายการได้ ได้เรียนรู้อะไรใหม่ทุกวันจริง ๆถ้าไม่มีการแจ้งใด ๆ ผู้ใช้จะไม่รู้ว่าพอกดปุ่มแล้วมีอะไรเกิดขึ้นจริงหรือไม่ หน้าทดสอบ: https://output.jsbin.com/jixoqur/quiet
เดโมล่าสุดเหล่านี้แสดงให้เห็นว่า ความก้าวหน้าของแมชชีนเลิร์นนิง/AI ในช่วงหลังน่าประทับใจเพียงใด ขณะเดียวกันก็แสดงให้เห็นว่านักพัฒนาหลายล้านคนทั่วโลกยังคงต้องนำงานที่ซ้ำซากและมีความคิดสร้างสรรค์ต่ำกลับมาทำใหม่ซ้ำแล้วซ้ำเล่าแค่ไหน
หน้าจอ UI ส่วนใหญ่สามารถอธิบายได้อย่างแม่นยำด้วยย่อหน้าหนึ่งหรือสองย่อหน้า ดังนั้นจึงไม่แปลกที่มันจะถูกแทนค่าได้ค่อนข้างละเอียดในเวกเตอร์ embedding ที่มีขนาดค่อนข้างเล็ก
โดยเฉพาะสายงานที่ไม่ใช่สายเทคนิคและไม่เคยใช้ AI อย่างหนักในงานจริงจะเปราะบางต่อเรื่องนี้ คนที่เจอในภาคสนามมักมองแบบมีรายละเอียดปลีกย่อยมากกว่า มันมีประโยชน์มากก็จริง แต่ก็ผิดพลาดบ่อย และถ้าจะให้ได้ผลลัพธ์ระดับ production ก็ต้องปรับแต่งอย่างละเอียด แม้ในฐานะคนที่มอง AI ในแง่ดี ผมก็คิดว่าคุณค่านั้นเป็นของจริง และเดโมที่น่าประทับใจก็ชี้ให้เห็นทิศทางที่เรากำลังไป แต่ยังต้องใช้เวลากว่าผลลัพธ์โดยเฉลี่ยจะไล่ทันความคาดหวังที่ถูกโหมเกินจริง
ในเดโมนี้พูดตรง ๆ ก็คือมีสไลเดอร์สองตัวไว้ปรับคุณสมบัติ CSS สองค่า ดังนั้นปริมาณข้อมูลในสเปก UI จึงไม่ได้มาก ถ้ามีภาษาสเปก UI ที่เหมาะสม ก็คงเป็นโค้ดสามบรรทัดเท่านั้น ความยากมาจากการต้องจัดการ boilerplate ของเว็บ UI
สิ่งที่แปลกคือใน HN เวลาเราพูดถึงแพลตฟอร์ม no-code แบบดั้งเดิม ผู้คนมองเห็นข้อจำกัดด้านการขยายระบบและการบำรุงรักษาได้ง่าย แต่พอมี AI เข้ามา กลับเหมือนปัญหาเหล่านี้ถูกแก้ไปทันที และไม่ต้องกังวลกับสปาเกตตีที่กล่องดำคายออกมา
สิ่งที่ต้องการจริง ๆ คือการแยกฟังก์ชันออกจากการนำเสนอ บังเอิญว่าเว็บ HTML ล้วน ๆ ในปี 1996 เป็นแบบนั้นพอดี แล้วบางอย่างก็ผิดพลาดอย่างเลวร้ายด้วยวิธีที่โง่เกินจินตนาการ และไม่มีใครทำให้มันดีขึ้นเลย สิ่งที่เหลือกลับเป็นแค่เอฟเฟกต์เงาและ flexbox ภายใน
งานออฟฟิศจำนวนมากคือการทำสิ่งเดิมซ้ำ ๆ และมักมีคนในบริษัทต่าง ๆ ทำงานที่โดยเนื้อแท้แล้วเหมือนกันซ้ำ ๆ กันอยู่
นี่ดูเหมือนเป็นเครื่องมือที่ทำให้นักออกแบบ UI หรืออาจรวมถึง product owner ดูฉลาดและมีความสามารถ แต่สุดท้ายงานจริงก็ยังจะถูกโยนไปให้นักโปรแกรมเมอร์เหมือนเดิม
นักออกแบบ UI อาจให้ “เดโม” ได้ แต่ฟังก์ชันพื้นฐานนี้จะเชื่อมกับส่วนที่เหลือของแอปอย่างไร? ก็คงไม่เชื่อม
ก่อนยุค GPT ก็มีข้อเสนออยู่แล้วว่าโปรโตไทป์หรือม็อกอัปช่วงแรก ๆ ควรถูกทำให้ดูมีความสมบูรณ์ทางภาพต่ำตามระดับฟังก์ชันภายใน โปรโตไทป์เฉพาะ UI ที่สวยและดูเหมือน “ใช้งานได้” แม้จะอธิบายชัดเจนแล้ว ก็ยังสร้างความคาดหวังที่ไม่สมจริง และเพิ่มโอกาสที่โปรโตไทป์จะกลายเป็น production ไปเลย หรือ proto-duction
ผมเคยเห็นหลายโปรเจกต์ที่การออกแบบระบบแย่ ๆ ถูกโยนมาให้วิศวกรเพราะข้อจำกัดจากดีไซน์ Figma ที่ผู้บริหารบางคนอนุมัติ แน่นอนว่าองค์กรแบบนั้นก็มีปัญหาใหญ่กว่าอยู่แล้ว แต่การทำม็อกอัปความละเอียดสูงได้ง่ายทำให้ปัญหาแบบนี้แย่กว่าไวร์เฟรม
ถ้าอยากให้มันทำได้ดียิ่งขึ้น ก็เติม "it's very important for my career" เข้าไปด้วย
นักพัฒนาที่ทำเดโมขยายและหมุนกล่องดูท่าจะกำลังตกงานแล้ว
ระหว่างคุยกับลูกค้าเรื่องวิธีผสานซอฟต์แวร์ของเราเข้ากับซอฟต์แวร์ของลูกค้า ลูกค้าส่งสกรีนช็อตของฟอร์มหลักมาให้
ผมเอาสกรีนช็อตนั้นใส่ใน ChatGPT แล้วบอกว่า “ช่วยทำฟอร์ม React แบบนี้ด้วย Bootstrap ให้หน่อย” หลังปรับแก้ไม่กี่อย่าง ผมก็ต่อซอฟต์แวร์ของตัวเองเข้าไป และไม่กี่ชั่วโมงต่อมาลูกค้าก็ประหลาดใจเมื่อเห็น proof of concept ที่ระบบถูกผสานได้รวดเร็วขนาดนี้ เวลามีปัญหาเลย์เอาต์ CSS ระหว่างพัฒนาเว็บ ผมมักอัปโหลดสกรีนช็อตไปให้ ChatGPT แล้วถามวิธีแก้ ซึ่งเดโมในทวีตก็ดูคล้ายกันทีเดียว
มีเฟรมเวิร์กออกมาเรื่อย ๆ ที่ยอดเยี่ยมกับกรณีใช้งานหวือหวา แต่หนักเกินไปสำหรับงานทั่วไปพื้นฐาน แม้จะมีข้อยกเว้นบ้างเป็นครั้งคราว แต่นักพัฒนาเว็บส่วนใหญ่ก็ไม่ได้ชอบของแบบนั้น มันไม่ได้ดูเท่ในเรซูเม่ด้วย และพูดตรง ๆ ใครกันจะอยากทำเว็บฟอร์มไปตลอดอาชีพ
สุดท้ายก็เป็นเต่าซ้อนเต่าอยู่ดี :+)
สำหรับการโค้ด ผมใช้ ChatGPT มากกว่ากับการจัดการข้อมูลอย่างรวดเร็วผ่าน command-line pipe หรือ Bash script ให้มันดูผลลัพธ์ของคำสั่ง แล้วขอ Bash สำหรับจัดรูปแบบ รวบรวม จัดเรียง หรือดึงข้อมูลตามที่ต้องการ ทำให้งานอย่างการดีบักหรือการตรวจสอบสมมติฐานที่ปกติอาจไม่ได้ลองทำ กลายเป็นเรื่องง่ายขึ้น จะทำเองแบบแมนนวลก็ได้แต่ช้า และถ้าจะจำออปชันกับอาร์กิวเมนต์ก็ต้องค้นหาหรือเปิด man page ส่วนโค้ดผมใช้ GH Copilot เป็นหลัก
จะเรียกว่าเป็นพวกขี้สงสัยก็ได้ แต่ผมไม่เชื่อใน อนาคตของโซลูชัน no-code เลย ต้องจัดเรียงปุ่มให้เข้ากับความละเอียดหน้าจอของอุปกรณ์ขนาดเล็ก ต้องเว้นระยะให้ดูดีในภาษาอื่น ๆ และยังมีข้อกำหนดอื่น ๆ ตามมาเรื่อย ๆ
อย่างมากก็คงช่วยให้สร้างแอปได้เร็วขึ้นด้วยภาษาที่มีระดับนามธรรมสูงขึ้นเท่านั้น วิธีนี้ใช้ได้กับสิ่งที่พื้นฐานมากและพบได้ทั่วไปอย่างเกม tic-tac-toe แต่ไม่เหมาะกับงานที่มีเอกลักษณ์เฉพาะ
ลองนึกภาพว่ามีคนหลายสิบคนที่รู้เทคโนโลยีนิดหน่อยวาดสเก็ตช์ แล้วกด “ช่วยทำให้ใช้งานจริงที” เพื่อเพิ่มฟีเจอร์ แต่ละคนสร้างโค้ดออกมาหลายร้อยบรรทัด พอจบวันก็ต้องมีใครสักคนเข้าใจผลลัพธ์นั้นให้ได้ และเพราะผลลัพธ์ไม่กำหนดแน่นอน สิ่งที่เหลืออยู่กับเราก็มีแค่นั้น
ขณะเดียวกัน คนหน้าใหม่จำนวนมากกว่ามากที่ไม่เคยเรียนหรือไม่อยากเรียนวิธีร้องให้ตรงคีย์ ก็จะสร้างแนวเพลงใหม่เอี่ยมและเพลงป็อปกระแสหลักได้ด้วยแรงน้อยลงมาก ช่างฝีมือเองก็จะใช้มันบ้างเป็นครั้งคราวเพื่อเสริมบาง workflow เพิ่มความเนี้ยบ และเร่งความเร็ว
ดูเหมือนว่าเครื่องมืออย่าง Canva, Figma จะนำฟีเจอร์แบบนี้ไปใช้อย่างจริงจัง และช่วยยกระดับ wireframe กับเดโมแบบ high-fidelity ได้มาก
Squarespace, Wix และบริการทำนองนี้ยึดตลาดระดับล่างไปแล้ว และถ้าไม่ใช่พวกนี้ งานนั้นก็คงตกไปอยู่กับการ outsource ไปอินเดีย
นี่คือวิวัฒนาการตามธรรมชาติของแนวคิดเดียวกัน ถ้าผมเป็น product manager ของเว็บไซต์บิลเดอร์ คงรีบกระโดดเข้าไปทำ การผสาน AI builder แบบนี้ทันที มันไม่มีทางใช้ได้กับงานธุรกิจที่ซับซ้อนและแทบไม่ได้ถูกนิยามไว้อย่างชัดเจน แต่คงสร้างเครื่องคำนวณค่าใช้จ่ายสำหรับธุรกิจถ่ายภาพได้ดี
ซอฟต์แวร์ workflow สำหรับกระบวนการธุรกิจค่อนข้างได้รับความนิยม มีแอปจำนวนมากที่ให้ผู้คนทำงานคล้าย ๆ กันด้วย drag and drop หรือเครื่องมือแก้ไข widget แบบโต้ตอบได้ และยังจัดการฟอร์มซับซ้อน ความสัมพันธ์แบบ parent-child และการเปลี่ยนสถานะได้ด้วย ถ้าใช้สิ่งอย่าง GPT Vision ก็ข้ามขั้นตอนลากวาง widget แล้วใช้เครื่องมือวาดที่อิสระกว่า หรือสเก็ตช์ด้วยมือได้ ตัวอย่างที่ได้รับความนิยมที่สุดในปัจจุบันน่าจะเป็น Notion และยังมีตัวอย่างที่ซับซ้อนกว่านี้มาตั้งแต่นานมากแล้ว
ตอนนี้รู้สึกแก่แล้ว หลายสิบปีก่อน เราก็ทำสิ่งนี้ด้วย VB หรือ Delphi ได้แทบจะเร็วพอ ๆ กันแล้วมั้ง เพียงแต่ผลลัพธ์ กำหนดแน่นอน กว่านิดหน่อย แทนที่เครื่องมือจะเดาจากชื่อ label
เราเคยมีสิ่งแบบนี้อยู่แล้ว และลืมไปว่ามันทำได้โดยไม่ต้องยัดทุกอย่างเข้าเบราว์เซอร์ และไม่ต้องใช้พลังคำนวณมหาศาลของโมเดล generative AI รู้สึกเหมือนกลายเป็นคนแก่ที่ตะโกนใส่ก้อนเมฆ
แน่นอนว่าโค้ดของ Dreamweaver น่าเกลียดและแทบใช้งานไม่ได้ ส่วนโค้ดที่ AI สร้างบางครั้งก็ไม่ได้แย่ขนาดนั้น ถึงอย่างนั้นก็รู้สึกว่าเราเคยมาใกล้ตำแหน่งปัจจุบันมากแล้ว
VB เป็นเครื่องมือที่ยึดแนวทางชัดเจนมาก และสร้างได้เฉพาะ UI สไตล์ Windows แบบ native เท่านั้น ไม่มีใครเอา mockup ใด ๆ ที่ดีไซเนอร์นำมา หรือ look and feel ที่ custom ทั้งหมด ไปทำซ้ำแบบ pixel-perfect ใน VB วันนี้ GUI ของผลิตภัณฑ์ส่วนใหญ่เป็นส่วนหนึ่งของแบรนด์ ไม่ว่าจะดีหรือร้าย ทุกบริษัทต้องการ look and feel และพฤติกรรม UI ที่เป็นเอกลักษณ์ ดังนั้นเครื่องมือที่ใช้สร้างจึงต้องซับซ้อนกว่ามาก ในเบราว์เซอร์ก็สร้าง VB ขึ้นมาใหม่ได้ และจริง ๆ ก็มีหลายคนทำคล้าย ๆ กันแล้ว แต่บริษัทต่าง ๆ ไม่ต้องการ UI ที่น่าเบื่อและทั่วไป จึงไม่ค่อยถูกใช้ในการพัฒนาผลิตภัณฑ์
โดยพื้นฐานแล้วมันทำงานด้วยการส่ง screenshot ของ diagram ไปให้ GPT-4 แล้วบอกว่า “ช่วย implement สิ่งนี้ให้ที”
สิบปีหลังจากนั้น ก็มีสิ่งที่ชื่อ Visix Vibe ซึ่งนำเสนอสิ่งเดียวกันสำหรับ Java ที่ตอนนั้นยังเป็นภาษาค่อนข้างใหม่อยู่ และมันวนเวียนอยู่สักหนึ่งถึงสองปี ทุก ๆ ไม่กี่ปี ราว 4–5 ปีหรือ 10 ปี จะมีใครสักคนอยากทำให้ความซับซ้อนทั้งหมดหายไป แต่ท้ายที่สุดพวกเขาก็ลงเอยด้วยการสร้างระบบปฏิบัติการ
และมันทำงานได้ถูกต้องจริง ๆ โต้ตอบกับส่วนที่เหลือของ toolkit ตามแบบที่คาดไว้ รวมถึง internationalization และ accessibility ก็ทำงานได้ดีอย่างสม่ำเสมอ ไม่มีเหตุผลที่ HTML จะทำอะไรได้มากกว่านี้อีกมากด้วยของที่มีมาให้ในตัวไม่ได้ และถ้าทำแบบนั้นก็คงลดเวลานักพัฒนามหาศาลและลดความหงุดหงิดของผู้ใช้ได้ทุกปี แต่เราก็ไม่ทำกัน