5K Stars Self-Media Image Skill - Xiaohei Skill: Hand-drawn Article Image Tutorial
Today I'm sharing some images suitable for use as illustrations. In the world of social media, writing articles is just the foundation; the ability to choose compelling images is becoming increasingly important. Modern people rarely read a long article carefully anymore; instead, they tend to spend more time looking at interesting pictures...
Today I'm posting some things that are suitable for use as illustrations.
When it comes to creating content for social media, writing articles is just the foundation; the ability to choose compelling images is becoming increasingly important. Modern people are less likely to read a long article carefully; instead, they'll likely take a second look at interesting accompanying pictures.
Here are some peoplerecommendA super fun illustration project: ian-xiaohei-illustrations, which I usually call Xiaohei Skill.
Follow us on WeChat and reply with "open source",join inAIopen sourceProject discussion group
helloianneo/ian-xiaohei-illustrations is Ian open sourceOne of the Codex Skills, the raw image logic, is to take the judgments, processes, states, and metaphors in an article and generate a series of white-background, hand-drawn, quirky but clean illustrations to accompany the text.
This is what Xiao Hei looks like: solid black, white-dotted eyes, thin legs, and an empty expression.
The images displayed by Xiaohei Skill are usually 16:9 white background hand-drawn, with a few Chinese annotations in red, orange and blue, and a lot of white space, looking like an explanatory sketch casually drawn by a product designer on a white paper.
Project address:https://github.com/helloianneo/ian-xiaohei-illustrations
Case 1: Illustration Planning
Xiao Hei Skill has several uses. The first is for image planning. Let's test it using our previous articles.
Prompt words:
Using the Xiaohai skill, don't use raw images yet. Please analyze which parts of the article below deserve images, and output a list of about 5 images. For each image, clearly describe: where it should be placed, the theme, the core meaning, the structural type, what Xiaohai is doing, and suggested Chinese captions.
article:
Today I'm posting something suitable for academic enthusiasts.
now AI With the increasing availability of academic tools, writing speed has improved, but a thorough check reveals numerous flaws.
What's even more painful is AI One can write a very firm argument, but the original literature cited may not actually support that argument.
I recently saw an academic research project on GitHub that specifically addresses this type of problem, and it already has 30,000 stars.
picture
01
Project Overview
Academic Research Skills (ARS) is a set of skills designed for... Claude Code ofopen sourceThe Academic Research Skills Package breaks down the processes of topic selection, literature search, paper writing, peer review, revision, and formatting, allowing... AI We will participate in stages; the key judgment is still left to us.
This project covers the entire academic workflow, from topic selection and research, literature search, paper writing, peer review, revision, to final formatting and process summary.
picture
This project mainly includes four skill sets:
Deep Research: Conducting in-depth research, literature reviews, systematic reviews, and fact-checking.
picture
Academic Paper: Assists with paper writing, abstract generation, format conversion, and citation format checking.LaTeX / PDF output.
picture
Academic Paper Reviewer: Simulates peer review, examines papers from multiple perspectives, and provides quality scores and revision suggestions.
picture
Academic Pipeline: This connects the research process to the publication of a manuscript, proceeds in stages, and incorporates academic integrity checks along the way.
picture
It is also particularly easy to useSimple.
If we are already using Claude With Code, you can install plugins directly with just two lines of commands.
/plugin marketplace add Imbad0202/academic-research-skills
/plugin install academic-research-skills
picture
02
Project measurement
The four skill sets in the project complement each other, and more than a dozen skills will appear alternately as we complete our paper. For example, we can let the project guide us in writing a paper:
Prompt wordsIt guided me to write a paper on the impact of declining birth rates.
The "Plan Mode" skill within the "Academic Paper" skill set will use a guided approach to help us plan a paper.
picture
By asking questions, we can find out the current progress of the paper and which structure we want to use.
picture
After we answer the questions about the progress and choose the paper structure, we will then proceed according to the current progress of the paper.recommendWe'll start with deep research.
picture
Of course, in deep research, we also use questions to determine the direction of some papers.
<Click on the image and scroll up and down to view the full content>
As you can see, this transitions to the full-mode workflow of the Academic Paper skill group.
The process proceeded directly to Phase 1: producing a research problem briefing and a methodological blueprint for us.
They also carefully confirm certain directional issues before conducting literature searches; the process is truly meticulous.
<Click on the image and scroll up and down to view the full content>
I thought the literature search results divided into four directions were already quite comprehensive, but I didn't expect it to also list some limitations.
<Click on the image and scroll up and down to view the full content>
After completing Phase 3: Analysis and Synthesis, we were given two options:
Enter Phase 4: Directly write the complete research report.
Alternatively, you can take this research foundation back to the planning mode of an academic paper and proceed with a chapter-by-chapter guided planning.
The second option is to return to our original goal, accumulate literature, and then plan the paper.
picture
We now have initial literature review, and our progress is no longer completely blank. Moreover, through the process we just went through, we have also extracted the core arguments of our paper.
<Click on the image and scroll up and down to view the full content>
Having a core argument helps us plan each chapter. ARS doesn't write the entire paper for us directly; instead, it uses skills to conduct a series of questions and answers, trying to incorporate our viewpoints as much as possible.
If no changes are made after one round of inquiries, it will enter full mode. AI Write a complete first draft of the paper.
<Click on the image and scroll up and down to view the full content>
The essence of this project lies in academic integrity gatekeeping and citation auditing.
usSimpleAsking "Please review my entire paper," ARS will insert a dedicated checkpoint in the paper review process to look for fictitious citations, data errors, claims not supported by the literature, and methodological embellishments.AI Hallucinations result in these problems.
Specifically, this is achieved by directly calling the Academic Paper Reviewer skill set.
<Click on the image and scroll up and down to view the full content>
As you can see, ARS scores our papers from many dimensions in a broad sense, and it also tells us which paragraphs or sentences need to be revised.
<Click on the image and scroll up and down to view the full content>
As you can see from the final result, the structure is very complete and the content is quite substantial. As a course-level paper, it's already quite presentable.
03
Dig
More than writing a complete paper, I'm interested in the methodology behind ARS: breaking down academic research into a system that can be replicated, documented, and audited. AI Workflow.
Universities can use ARS for thesis writing tutoring and academic integrity checks. Research teams can use ARS for literature reviews and preliminary project research. Journals and educational institutions can use it for initial screening and peer review. R&D, consulting, and investment research teams in companies can also use similar processes to check the chain of evidence in the reports.
Features like "citation auditing" and "claim support checks" are particularly likely to become standard practice in the future. AI The core charging points for academic tools.
Now many AI The tools are still at the level of "helping you write more like a research paper," but the real problems remain unsolved: Is each conclusion supported by relevant literature? Have the citations been misinterpreted? Is the data taken from other contexts?
AI There's no need to rush to complete all the professional work at once. A better approach is to integrate yourself into the professional process, helping people ask follow-up questions, verify information, and double-check details, filling in the gaps in those most easily overlooked steps.
Five image selections were completed in just a few minutes:
These five points are well-chosen overall, capturing several key moments in the article where readers might pause to reflect. This set of diagrams isn't evenly distributed according to functional modules; it focuses on the specific locations within the article where judgments are truly necessary.
Case 2: Images accompanying the text
The second way to use it is to directly generate images for the text. Give him an article, and it will automatically provide the images.
Prompt wordsUse the Xiaohei Skill to generate 4 Xiaohei-themed illustrations to accompany the article below. Requirements: 16:9 landscape orientation, pure white background, black hand-drawn line art, and a few handwritten annotations in red, orange, and blue Chinese characters.
article:
Today I'm sharing some things suitable for front-end developers.
To be honest, there are some now. AI Agent The front-end aesthetics are extremely poor, with layouts that are too centered, cards stacked, gradients overused, white space and hierarchy that are unnatural, animations that lack rhythm, and fonts and spacing that lack a sense of sophistication. The resulting web pages look cheap, and Codex is a prime example.
A few days ago I finally found something on GitHub called Taste Skill The project can solveAI Agent The issue of poor aesthetics has led to approximately 40,000 stars in the project repository.
picture
01
Project Overview
Taste Skill is oriented towards AI Agent A front-end design skills library, aiming to help AI Get rid of template-based, homogenized, and aesthetically unappealing front-end designs.
Transforming elements such as layout, typography, motion effects, spacing, visual density, and design language—which originally required design experience to judge—into something that can be... AI Agent Read and execute SKILL.md instructions to improve performance. AI Design judgment when generating interfaces.
Taste Skill currently includes various skill modules for different purposes, each module solving a specific problem:
design-taste-frontend
The default Skill will infer the design language based on the requirements and control the output through several key dimensions, such as layout variability, animation intensity, and information density.
gpt-taste
Suitable GPTA strict version of /Codex, which is more tolerant of layout changes,GSAP The requirements for animation effects and anti-templateization are higher.
image-to-code
Suitable for those who need to create a webpage reference image first, and then let AI The scenario is restored to the front-end code.
redesign-existing-projects
Used to revamp existing projects. First, review the existing UI, then fix issues related to layout, spacing, hierarchy, and visual style.
high-end visual design
The visual style is high-end, restrained, and refined, emphasizing soft contrasts, white space, font texture, and natural animation.
minimalist-ui
It features a modern, minimalist product interface similar to Notion and Linear, making it suitable for SaaS, tool-type products, developer products, and content-based back-ends.
industrial-brutalist-ui
With its industrial style, rough texture, Swiss font, strong contrast, and experimental layout, it is suitable for more individualistic and sharper visual expressions.
full-output-enforcement
Used for constraints AI Do not provide only incomplete solutions, placeholders, or omitted code; provide appropriate processing methods. Agent The problem is incomplete output.
Image generation skills
This includes imagegen-frontend-web, imagegen-frontend-mobile, and brandkit, used to generate reference images such as website visual drafts, mobile interface flows, and brand visual boards, which are then handed over to Codex, Cursor, or... Claude Code implementation.
The installation method for Taste Skill is very simple.SimpleIt can be installed directly via CLI:
npx skills add https://github.com/Leonxlnx/taste-skill
If you only want to install a specific skill, you can also specify the skill name:
npx skills add https://github.com/Leonxlnx/taste-skill –skill "design-taste-frontend"
The project also supports a lighter usage method: directly copy any SKILL.md file into the project, or paste it into Chat.GPT Used in /Codex conversations.
02
Project measurement
Codex Test 1
Let's generate a webpage for both the case with and without Skill, and compare the results.
No Skill:
Prompt words:
Help me implement one from scratchAI Agent The product website's homepage does not use any special features.
Product Name: LoopPilot
Product Positioning: A tool to help teamsautomaticPlanning, execution, and review of tasks AI Agent Workbench.
Target users: Independent developers, small teamsAI Product Manager.
Page style: Avoid the typical SaaS template feel, excessive blue-purple gradients, and excessive card clutter. The desired effect is a sophisticated, restrained, and clear information hierarchy, while also incorporating a futuristic and tool-like aesthetic.
Please complete the following:
1. Design a complete homepage.
- Includes product name, main title, subtitle, main CTA, and secondary CTA.
– Showcase 3 core capabilities:automaticBreak down tasks, execute continuously, and review and optimize.
– A product interface preview area is required, but it should not resemble a standard dashboard template.
– The first screen should have a clear visual memory point.
2. Design Style Requirements
– Use non-template layouts to avoid centering and stacking all content.
– The font hierarchy should be clear, and the title should be impactful but not crude.
– Limit the color scheme to 3-5 primary colors.
– Animation effects are acceptable, but they should serve to convey information, not just show off technical skills.
– The page needs to be adapted for both mobile and desktop devices.
3. Code Requirements
– Please output the complete, runnable code directly.
- Do not use placeholders, and do not omit any critical code.
– Don't just offer design suggestions; actually implement the page.
– If using components, please ensure that all components are fully written.
– If styling is required, please provide the complete CSS/Tailwind class.
4. Acceptance Criteria
– The page should not look like AI Default generated SaaS template
- Clear visual hierarchy, obvious CTA
– The screenshot must also be valid on mobile devices at 9:16.
– All text must not overflow or overlap.
– The final result should resemble the homepage of a real product launch.
Please briefly describe your design direction first, and then provide a complete implementation.
▲Swipe up and down to view the full text
Desktop version:
picture
Mobile version:
<Click on the image and scroll up and down to view the full content>
The version without Skills doesn't follow the typical SaaS homepage layout of "centered title + three cards + blue-purple gradient".
However, the product feel is weak. The workbench on the right is more like a decorative image. Users are attracted by the big titles and graphics, but in the end, they can't figure out how the product helps the team work or how it forms a closed loop.
It's still viewable on mobile devices, but the line breaks in the title are a bit abrupt.
Use Taste Skill:
Prompt words:
Please use the design-taste-frontend and full-output-enforcement tools from Taste Skill to help me implement one from scratch.AI Agent The product's official website homepage.
Product Name: LoopPilot
Product Positioning: A tool to help teamsautomaticPlanning, execution, and review of tasks AI Agent Workbench.
Target users: Independent developers, small teamsAI Product Manager.
Page style: Avoid the typical SaaS template feel, excessive blue-purple gradients, and excessive card clutter. The desired effect is a sophisticated, restrained, and clear information hierarchy, while also incorporating a futuristic and tool-like aesthetic.
Please complete the following:
1. Design a complete homepage.
- Includes product name, main title, subtitle, main CTA, and secondary CTA.
– Showcase 3 core capabilities:automaticBreak down tasks, execute continuously, and review and optimize.
– A product interface preview area is required, but it should not resemble a standard dashboard template.
– The first screen should have a clear visual memory point.
2. Design Style Requirements
– Use non-template layouts to avoid centering and stacking all content.
– The font hierarchy should be clear, and the title should be impactful but not crude.
– Limit the color scheme to 3-5 primary colors.
Animation effects are acceptable, but they should serve to convey information, not just show off technical skills.
– The page needs to be adapted for both mobile and desktop devices.
3. Code Requirements
– Please output the complete, runnable code directly.
- Do not use placeholders, and do not omit any critical code.
– Don't just offer design suggestions; actually implement the page.
– If using components, please ensure that all components are fully written.
– If styling is required, please provide the complete CSS/Tailwind class.
4. Acceptance Criteria
– The page should not look like AI Default generated SaaS template
- Clear visual hierarchy, obvious CTA
– The screenshot must also be valid on mobile devices at 9:16.
– All text must not overflow or overlap.
– The final result should resemble the homepage of a real product launch.
Please briefly describe your design direction first, and then provide a complete implementation.
▲Swipe up and down to view the full text
Desktop version:
picture
Mobile version:
<Click on the image and scroll up and down to view the full content>
The addition of a top navigation bar to Taste Skill makes it much more visually appealing; these days, which website doesn't have a navigation bar at the top?
The product preview on the right is no longer just an abstract graphic; users can understand the product's path through step-by-step text.
The mobile version is also more mature, with capabilities becoming independent information blocks, and the reading order is more natural.
Codex test 2
Of course, existing projects can also be refactored using Taste Skill.
Prompt words:
Please use the redesign-existing-projects, minimalist-ui, high-end-visual-design, and full-output-enforcement tools in Taste Skill to help me redesign the homepage of an existing project.
Project location:
D:\360MoveData\Users\win\Desktop\公众号\wechat-topic-dashboard-ugly-homepage
background:
This is the official homepage of a "WeChat Official Account Topic Management Platform," whose product name is Content Desk. It targets content teams on platforms like WeChat Official Accounts, Xiaohongshu, Video Accounts, and Zhihu, helping them manage topic selection, assign responsible personnel, track progress, and view content. AI recommendand content presentation.
The current problem:
The current page has all the necessary functions and information, but its visual presentation is very template-like:
– The blue-purple-pink gradient is too heavy.
– Exaggerated headline
- Page excessively centered
- Card stacking is severe
– CTA repeat
– Product screenshots are decorated, unlike real products.
- Loose information hierarchy
– The reading path on mobile devices is very long
– Overall, it looks like a normal AI Generated SaaS landing page
Refactoring goals:
Without altering the product's theme and core information, refactor it into a more professional, restrained, and credible homepage for a content operations tool website. The final result should resemble the official website of a real SaaS product preparing for launch, not a template page.
Please complete the following:
1. First screen reconstruction
– Keep product name Content Desk
– Maintain product positioning: A WeChat Official Account topic management platform for content teams.
– A clear main title, subtitle, main CTA, and secondary CTA are required.
– Avoid using exaggerated expressions like "efficiency increased by 300%".
– The first screen must display a credible product interface preview, not a plain decorative image.
– It should be visually memorable, but not flashy.
2. Product Capabilities Demonstration
The following abilities need to be demonstrated:
– AI recommendTopic selection
– Multi-platform topic selection management
– Status and Responsible Person Tracking
- Deadlines and Priority Management
– Content Risk Warning
– Performance review
Do not use the following display methodSimpleStack up 6 large cards and reorganize the information hierarchy according to the content operation scenario.
3. Workflow Demonstration
Demonstrating a content team's process from topic selection to post-mortem analysis:
– Collect hot topics
– Evaluate topic selection
– Assign writing
– Review and release
– Data Review
The workflow should correspond to the product interface, and should not be just a simple 1, 2, 3 step card.
4. Page style requirements
– With a feel reminiscent of Notion / Linear / Lark Multi-Table / Modern B2B SaaS tools
– Restrained, refreshing, trustworthy
– Moderate information density, avoid excessive information.
– Avoid large areas of blue-purple gradient.
– Avoid stacking large, rounded cards.
– Avoid overly exaggerated shadows
– Avoid marketing jargon
– There should be a clear layout rhythm, white space, font hierarchy, and status colors.
Desktop-first, but mobile-first should also be a natural fit.
5. Code Requirements
– Directly modify existing files in the project
– Output a complete, runnable version
– Do not omit the code
– Do not use lorem ipsum
– Don't just offer design suggestions; actually implement the page.
- Ensure that text does not overflow or overlap on both desktop and mobile devices.
– It can be implemented using pure static HTML/CSS; no complex frameworks are needed.
6. Acceptance Criteria
– It shouldn't look like... AI Default generated SaaS template
– The product interface preview should be believable, clearly indicating that it is a "content selection management tool".
– CTA is clear but not noisy
– Capabilities and processes are not about stacking cards, but about organizing them around real-world content operation scenarios.
– Natural reading order on mobile devices
– The visual difference before and after reconstruction should be obvious.
– The final page is suitable as a practical case study for refactoring existing projects using Taste Skill.
First, briefly point out the main problems with the original page, then explain your refactoring strategy, and finally modify the project files and provide a complete implementation.
▲Swipe up and down to view the full text
Original desktop version:
<Click on the image and scroll up and down to view the full content>
Original mobile version:
<Click on the image and scroll up and down to view the full content>
The original page's blue-purple-pink gradient and heavy shadows were too eye-catching, the first screen was overly centered, and the functions and processes were all stacked with cards on an average basis.
The product screenshots in the middle are also too decorative, and the data and interface structure inside look fake, more like a mockup placed to fill the first screen.
The problems are more pronounced on mobile devices: navigation, titles, buttons, screenshots, and function cards are piled up one after another, resulting in a long reading path and heavy visual noise.
The redesigned desktop interface looks like this:
picture
The redesigned mobile app looks like this:
<Click on the image and scroll up and down to view the full content>
The redesigned page layout looks much better; the original page colors were almost blinding.
The left side of the desktop displays product positioning and core data, while the right side provides a reliable preview of a topic selection workbench. Users can easily understand that this is used to manage topic selection, status, and...AI Tools for recommendations, risks, and release performance.
The information order on mobile devices has changed to: brand navigation, product positioning, main title, CTA, and core data. Users no longer need to navigate through a bunch of transitions and marketing rhetoric, allowing them to understand what the product is more quickly.
03
Dig
AI AgentIt is becoming part of the development process.
The Stack Overflow 2025 Developer Survey shows that 84% of developers have used or plan to use it. AI Tools that 51% of professional developers use daily.
picture
at the same time,AI The Code Tools market is projected to grow from $4.3 billion in 2023 to $12.6 billion in 2028.
picture
butAI Being able to write code doesn't mean you can build a product. This is especially true for front-end development, where many aspects require skill. Agent The generated results are still in the Demo stage.
Taste Skill encapsulates the experience and aesthetic sense of front-end designers into skill rules, allowing... AI Agent It can generate interfaces that are closer to real product delivery standards.
Solved AI The most common pain points in front-end development include: page templates, overuse of card stacking and gradients, poor mobile adaptation, lack of credibility in product previews, chaotic back-end information hierarchy, and high cost of rebuilding existing projects.
letAI Product website homepage, SaaS landing page, backend management system, content operation workbench,Agent Taste Skill can be used to create product demos, customer project prototypes, and UI refactoring of existing projects.
For small teams without a complete design team, it can significantly reduce the cost from idea to MVP, and from demo to a demonstrable product.
The value of Taste Skill lies in transforming front-end aesthetics and product judgment into a reusable tool. AI productive forces.
Xiaohei Skill selected four points as the accompanying images for the article.
AI Agent Front-end smells:
Taste Skill Rules Machine:
Comparison of no skill / with skill:
Demo passes the standard delivery gate:
The logical order of the four selection points is very smooth, encompassing pain points, mechanisms, actual testing, and value convergence.
The article contains many skill modules and installation steps, but these are better suited for screenshots or text descriptions; Xiaohei will place the images where readers need to make judgments, which will be more effective.
Case 3 Single concept/paragraph image
The third method is to directly provide a concept or a short passage, and then use the Xiaohei Skill to generate a diagram.
Prompt wordsUse Xiao Hei's Skill to generate an image for the sentence, "Everyone has an antenna in their heart. As long as they can still receive signals of beauty, hope, joy, courage, and strength, they can stay young and vibrant forever." The image should be quirky yet refreshing, and Xiao Hei must handle the core actions.
The metaphor is also clear: the five signal words—beauty, hope, joy, courage, and strength—correspond to flowers, sunrise, smiling face, flag, and flame. The signal line enters the antenna in the chest cavity and then connects to the bud and clock.
Xiao Hei took on the action in the scene and did not become a mere decoration, which meets the requirements of Xiao Hei's Skill.
People might be thinking: I don't really like this little black character, can I choose a different character?
Of course! Everyone can customize their own style.Prompt wordsThis allows you to integrate your own IP image into your Skill.
I provided the three views of the dig:
Then enter in CodexPrompt words:
Prompt wordsReplace the little black figure in the Little Black skill with the image of a digger, and create a Little Digger skill as a dungeon.
In this way, we can obtain a little black skill that has been marinated with personal IP, or rather, a little digging skill.
Prompt wordsUse the Xiaowa skill to generate an image for this passage: GLM-5.2. This update is particularly valuable in this context. The 1M context allows the model to handle longer codebases and incident material; MIT License andopen sourceWeighting gives teams more flexibility in private deployments, cost control, and compliance reviews; Coding Agent Capabilities, accelerating R&D efficiency is the easiest direction to implement.
Here's another one, a quote-type one.
Prompt wordsUse the Xiaowa skill to generate an image for this passage: Great dreams are not something you can wait for or shout for; they are something you have to fight for and work hard for.
Prompt wordsUse the Xiaowa skill to generate an image for this passage: General Agent The two ends were connected together.Agent It can both understand the material and access file, browser, image generation, code, and local export tools. Integrating PPT Skill into this workflow transforms creating a PPT presentation from "opening a tool" to "assigning a task."
These images already have the "Little Digger" IP flavor, with recognizable features including an orange safety helmet, headlamp, goggles, calico cat patches, a small pickaxe, a mine shaft, and a minecart.
After looking at several images in the same series, readers will most likely remember that this is the little miner cat digging for concepts.
Content production is shifting from competition based solely on text to competition based on a combination of text and images.
Public accounts, blogs, knowledge bases, product documents, and course materials all require more frequent and lower-cost explanatory illustrations. Many teams are already using... AI When writing the first draft, the image strategy and visual style begin to become the memorable aspects of the article.
Xiaohei Skill first determines where in an article an image is worth including, then transforms abstract viewpoints, processes, states, and metaphors into clean, hand-drawn explanatory diagrams. For content creators, this is more suitable for long-term use than hastily finding materials, stuffing in screenshots, or using template infographics.
Xiaohei Skill addresses several issues: reading fatigue with long articles, inconsistent image styles, difficulty in understanding abstract concepts, and a lack of stable visual assets for creators. Combined with personal IP transformation features like Xiaowa, it can also become an account's own visual identity system.
when AI As writing becomes more widespread, the ability to present viewpoints clearly, interestingly, and memorablely will become a new differentiator for content accounts.
Original link:This GitHub post boasts 5K stars, and the accompanying image shows a truly incredibly useful skill.