Ten Guide Style Guide Tools สำหรับนักออกแบบเว็บไซต์ - ดีที่สุด

คู่มือการใช้ชีวิตสไตล์ คือ เอกสารประกอบขององค์ประกอบ UI และรูปแบบ รวบรวมจากไซต์หรือแอปพลิเคชันโดยมีวัตถุประสงค์เพื่อให้นักพัฒนาซอฟต์แวร์สามารถใช้งานได้ สไตล์ที่สอดคล้องกันตลอดทั้งโครงการ. ในอดีตนักพัฒนาสร้างคู่มือสไตล์ด้วยตนเองซึ่งทำงานมาก หลังจากนั้นครู่หนึ่งพวกเขาเริ่มทำให้เวิร์กโฟลว์อัตโนมัติและเครื่องมือแนะนำสไตล์ซึ่งเปลี่ยนรหัสส่วนหน้าให้เป็น ไลบรารี UI ที่มีการจัดการอย่างดี ได้เริ่มปรากฏ.

ไกด์การใช้ชีวิตแตกต่างจาก คู่มือสไตล์รหัส, เนื่องจากหลังมีกฎเกี่ยวกับวิธีการเขียนรหัสที่สามารถอ่านได้และบำรุงรักษาได้ในขณะที่แนวทางการใช้ชีวิตคือ คอลเล็กชันของรูปแบบส่วนหน้าเช่นคลาส CSS สำหรับปุ่มวิดเจ็ตและองค์ประกอบการพิมพ์. คู่มือสไตล์รหัสมั่นใจ ความสอดคล้องของรหัส, ในขณะที่คู่มือการใช้ชีวิตมั่นใจ ความมั่นคงทางสายตา ทั่วทั้งไซต์.

ในโพสต์นี้เราได้รวบรวม 10 เครื่องมือที่มีประโยชน์ที่สามารถช่วยคุณได้ สร้างคู่มือสไตล์การใช้ชีวิตของคุณเอง.

1. Stylify Me

เครื่องมือนี้สนุกมาก: เพียงวางลิงค์ของเว็บไซต์ที่คุณต้องการวิเคราะห์และดูว่าคู่มือสไตล์นั้นสร้างขึ้นในคลิกเดียวของเมาส์ กับ Stylify Me, คุณสามารถรับภาพรวมของรูปแบบของไซต์ได้อย่างรวดเร็วรวมถึงสีแบบอักษรขนาดและระยะห่าง เมื่อกระบวนการเสร็จสมบูรณ์คุณสามารถ ดาวน์โหลดคู่มือสไตล์ใน PDF.

2. Fabricator

fabricator ช่วยให้คุณสร้างชุดเครื่องมือ UI ของคุณเองจัดระเบียบระบบการออกแบบของคุณและสร้างคู่มือสไตล์จากรหัสชุดเครื่องมือของคุณ หากคุณทำงานเป็นทีมคุณสามารถเขียนเอกสารใน Markdown เพื่อให้นักพัฒนาซอฟต์แวร์รายอื่นใช้งานได้ง่ายขึ้น มันสามารถช่วยคุณได้ จัดระเบียบงานออกแบบ / การเข้ารหัสของคุณ ในแบบที่คุณชอบ.

3. Frontify

Frontify รวมทุกอย่างตั้งแต่ mockups แบบดิจิทัลไปจนถึง wireframing พวกเขายังมีเครื่องมือแนะนำสไตล์ซึ่งนำเสนอกระบวนการออกแบบที่เรียบง่าย แต่ไม่ยุ่งยาก คุณสามารถสมัครฟรีและใส่ข้อมูลที่จำเป็นทั้งหมดด้วยตนเอง กระบวนการนี้ควรรวมจานสีตัวเลือกแบบอักษรไอคอนโลโก้คำขวัญหรือเว็บคัดลอกที่ต้องการ.

4. Aigis

กับ Aigis, คุณสามารถสร้างคู่มือสไตล์ได้จากไฟล์ข้อความใด ๆ (เช่น. .CSS, .SCSS, .สไตล์, .เอ็มดี) คุณยังสามารถเขียนเอกสารใน Markdown และปรับแต่งชุดรูปแบบเว็บไซต์ของคุณ.

5. โฮโลแกรม

ภาพสามมิติ ถูกสร้างขึ้นโดย Trulia และเป็นโซลูชั่นที่ยอดเยี่ยมสำหรับการสร้างไกด์สไตล์ มันเป็นอัญมณีทับทิมที่ แยกวิเคราะห์ความคิดเห็นใน CSS ของคุณ เพื่อสร้างคู่มือสไตล์ที่ยอดเยี่ยม โฮโลแกรมมีระบบ templating ที่มีรูปแบบพื้นฐานและการนำทางเพื่อให้คู่มือสไตล์ของคุณสร้างได้ง่ายขึ้น.

6. สไตล์

กับ Styledown, คุณสามารถเขียนคู่มือสไตล์ CSS ได้อย่างง่ายดายเนื่องจากเป็น เครื่องมือสร้างคู่มือสไตล์ที่มาร์ดาวน์ดาวน์. มันจะทำงานร่วมกับการตั้งค่าการพัฒนาเว็บส่วนใหญ่เนื่องจากเป็นแพลตฟอร์มที่เป็นกลาง มันต้องใช้เวลาน้อยมากในการเริ่มต้นและทำงาน ความคิดเห็นที่คุณต้องการเพิ่มลงใน CSS นั้นมีน้อยมาก คุณสามารถสร้างเอกสาร CSS ของคุณในความคิดเห็น CSS แบบอินไลน์หรือเป็นไฟล์ Markdown แยกต่างหาก.

7. KSS

KSS (สไตล์แผ่น Knyle) เป็นหลัก ข้อกำหนดเอกสารประกอบ และรูปแบบคู่มือสไตล์ที่มี ไวยากรณ์การแสดงความคิดเห็นของตัวเอง. KSS ยังมีไลบรารี Ruby ที่แยกวิเคราะห์ .เขื่อง, .SCSS, และ .CSS จัดทำเอกสารที่มีแนวทางของ KSS ไว้ในคู่มือแบบเรียบร้อย KSS เหมาะสำหรับผู้ใช้และทีมงานมืออาชีพที่มากขึ้นเนื่องจากการสร้างคู่มือสไตล์ซึ่งต้องใช้ความรู้ด้านการเข้ารหัส.

8. SC5 Style Guide Generator

กับ เครื่องกำเนิดคู่มือสไตล์ SC5 คุณสามารถสร้างและแก้ไขคำแนะนำสไตล์ได้โดยตรงในเบราว์เซอร์ของคุณ มันคือ ขึ้นอยู่กับ KSS ด้วยคุณสมบัติเจ๋ง ๆ รวมอยู่ด้วยเช่น AngularJS ขับเคลื่อน UI ที่ช่วยให้คุณดูค้นหาและทดสอบสไตล์ของคุณ SC5 ใช้สัญลักษณ์เอกสารเดียวกับ KSS รองรับ SASS, LESS, PostCSS และ CSS สไตล์ล้วนๆ.

9. Styledocco

StyleDocco เป็นแอพ Node.js ที่สะดวก สร้างคู่มือสไตล์จากสไตล์ชีทของคุณ. คุณสามารถติดตั้งได้ด้วย npm ใน styleguide ที่สร้างขึ้น StyleDocco จะแสดงตัวอย่างพร้อมสไตล์ที่คุณใช้และตัวอย่างของโค้ด HTML.

ในหน้าแรกของ StyleDocco คุณสามารถค้นหาตัวอย่างคู่มือสไตล์สองแบบหนึ่งอันที่สร้างจากสไตล์ชีทเริ่มต้นและอีกตัวอย่างหนึ่งที่สร้างจากไซต์ Bootstrap ตัวอย่างนี้ยังสามารถช่วยให้คุณรับไวยากรณ์เอกสารประกอบที่ SytleDocco ใช้.

10. Lab แบบ

แล็บแบบ คือชุดเครื่องมือที่ช่วยคุณสร้าง ระบบการออกแบบแบบแยกส่วน. Pattern Lab เป็นตัวสร้างไซต์สแตติกแบบกำหนดเองที่รวมองค์ประกอบสไตล์ทั้งหมดบนไซต์เข้าด้วยกันและสร้างแม่แบบและหน้าจากรูปแบบเหล่านั้น มันสามารถทำหน้าที่เป็นโครงการของคุณ ห้องสมุดรูปแบบ และ คู่มือสไตล์ส่วนหน้า. Pattern Lab ให้คุณดูองค์ประกอบสไตล์ของคุณพร้อมกัน นามธรรม และ ในบริบท.